时间戳

首页 > 解决方案 > React Native 链接/图标样式

react-native - React Native 链接/图标样式

问题描述

我正在使用create-react-native-app构建一个android应用程序。我有一个Nav组件并使用{Link}fromreact-router-native和Iconfrom 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
  }
})

标签： react-native

解决方案

React-native-routerLink是使用 react-nativeTouchableHighlight作为其主要组件构建的，因此我们可以使用相同的属性。

我该如何操作？当我单击它时摆脱黑色背景颜色或让它显示不同的颜色？


设置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>

推荐阅读