标签栏中的两个图标 |重新导航答案

【问题标题】：two icons in tabbar | reactnavigation标签栏中的两个图标 |重新导航
【发布时间】：2018-04-30 00:19:41
【问题描述】：

我想在 tabicon 旁边添加一些图标（小圆圈）。我怎样才能做到这一点？也许一些png高于另一个。所以我可以直观地反馈哪个连接处于活动状态

export default class ConnectionInfoScreen extends Component<{}> {
    static navigationOptions ={
        tabBarIcon:
            ({tintColor}: { tintColor: any }) => (
                <Image
                    source={require('../../assets/connect.png')}
                    style={[styles.icon, {tintColor: tintColor}]}
                />
            ),
    };

    render() {
        var isConnected = true;
        if (isConnected) {

            return (
                <View>
                    <Text>keine Verbindung</Text>
                </View>
            );
        }

        else {
            return (
                <View>
                    <Text>ConnectionInfo</Text>
                </View>
            );
        }
    }
}

【问题讨论】：

标签： javascript typescript react-native react-native-android react-navigation

【解决方案1】：

通常使用activeTintColortabBarOption，以便图标可以以不同的颜色呈现以表明它处于活动状态。 tabBarIcon 不是只返回一个图像，而是返回某种可以用颜色设置样式的 Icon 组件（This 是一个示例，您可以在其中获得这样的好图标）。

但如果你想坚持使用图片：

tabBarIcon 属性为 defined 为：

"[a] 给定 {focused: boolean, tintColor: string } 的 React 元素或函数返回一个 React.Node，显示在标签栏中。"

因此，如果您提供 focused 作为参数，您可以选择显示不同的图像作为您的 tabBarIcon，如下所示：

tabBarIcon:
        ({ focused,tintColor }) => {
            if(focused){
                return (
                    <Image
                        source={require('./focused-icon.png')}
                        style={styles.icon}
                    />
                )
            }
            else{
                return(
                    <Image
                        source={require('./not-focused-icon.png')}
                        style={styles.icon}
                    />
                )
            }
        },

或者，如果您想在图像上显示另一个组件（例如“小圆圈”）：

tabBarIcon: ({ focused,tintColor }) => {
  if(focused){
    return (
      <View>
        <Image
          source={require('./my-icon.png')}
          style={styles.icon}
          />
          <View name="active-indicator" style={{backgroundColor:'red',width:10,height:10,borderRadius:20,position:'absolute',top:-5,left:-5}}/>
      </View>
    )
  }
  else{
    return(
    <Image
      source={require('./my-icon.png')}
      style={styles.icon}
    />
    )
  }
},

【讨论】：