问反应本机链接/图标样式
EN

Stack Overflow用户

提问于 2018-08-29 15:41:43

回答 1查看 5K关注 0票数 2

我正在使用create-react-native-app构建一个安卓应用程序。我有一个Nav组件，并使用来自react-router-native的{Link}和来自react-native-vector-icons/MaterialIcons的Icon。我的问题是，当我按下其中一个<Link/>时，它会暂时给自己一个黑色的背景色。

我该怎么操纵这个？或者当我点击黑色背景色时，还是让它显示不同的颜色？

我的代码：

import React from 'react';
import { StyleSheet, View, Text} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import {Link} from 'react-router-native';

export default class Nav extends React.Component {
  render() {
    return (
      <View style={styles.nav}>

        <Link to='/'>
          <Icon name="home" style={styles.icon} size={35}/>
        </Link>

        <Link to='/add'>
          <Icon name="add" style={styles.icon} size={35}/>
        </Link>

        <Link to='/view'>
          <Icon name="list" style={styles.icon} size={35}/>
        </Link>

        <Link to='/about'>
          <Icon name="help" style={styles.icon} size={35}/>
        </Link>

      </View>
    )
  }
}

const styles = StyleSheet.create({
  nav: {
    flex:1,
    alignItems:'center',
    justifyContent:'space-around',
    flexDirection:'row',
  },
  icon: {
    height:35,
    color:'white',
  },
  link: {
    flex:1
  }
})

react-native

回答 1

Stack Overflow用户

发布于 2018-12-06 16:22:40

react-本机路由器的Link是使用react-本机的TouchableHighlight作为其主要组件构建的，因此我们可以使用相同的属性。

我该怎么操纵这个？或者当我点击黑色背景色时，还是让它显示不同的颜色？

将underlayColor设置为清除

<Link to='/' underlayColor="transparent">
    <Icon name="home" style={styles.icon} size={35}/>
</Link>

或任何不透明度为0的颜色

<Link to='/' underlayColor="rgba(255, 255, 255, 0)">
    <Icon name="home" style={styles.icon} size={35}/>
</Link>

或者任何你喜欢的颜色

<Link to='/' underlayColor="rgba(55, 155, 255, 1)">
    <Icon name="home" style={styles.icon} size={35}/>
</Link>

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52081397

复制

相似问题

问反应本机链接/图标样式
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问反应本机链接/图标样式EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问反应本机链接/图标样式
EN