Question

我正在使用create-react-native-app来构建一个android应用。我有一个Nav组件，并使用了{Link}中的react-router-native和Icon中的react-native-vector-icons/MaterialIcons。我的问题是，当我按下<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
  }
})

Answer 1

React-native-router的Link是使用react-native的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>

反应本机链接/图标样式

1 个答案: