选择和未选择状态的反应导航中的不同tabBar图标？

Question

我正在设置一个tabbar，使用react native in react native。我无法为选定/未选定状态设置多个标签栏图标。任何参考或文档会有帮助吗？

Answer 1

tabBarIcon回调为您提供聚焦变量。

static navigationOptions = {
    tabBarLabel: 'Home',
    tabBarIcon: ({ focused }) => {
        const image = focused 
        ? require('../active.png') 
        : require('../inactive.png')
        return (
            <Image 
                source={image}
                style={styles.tabIcon}
            />
        )
    }
}

Answer 2

您可以根据activeTintColor / inactiveTintColor

更改图标

static navigationOptions = {
    tabBarLabel: 'Notifications',
    tabBarIcon: ({ tintColor }) => (tintColor == '#e91e63' ?
      <Image
        source={require('./activeIcon.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
      :
      <Image
        source={require('./inactiveIcon.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
    tabBarOptions: {
        activeTintColor: '#e91e63',
    }

};

即使您不使用色调，也可以这样做。