选择时如何更改底部标签导航图标的颜色？

【问题标题】：How do I change the color of bottom tab navigation icon when selected?选择时如何更改底部标签导航图标的颜色？
【发布时间】：2020-06-29 19:17:53
【问题描述】：

当我选择一个选项卡时，选项卡的名称会改变颜色。我也想了解如何更改图标颜色。

<BottomNavigationTab
      title="Profile"
      icon={(focused) => {
        return (
          <Icon
            name="person-outline"
            style={{height: 30, width: 30, marginTop: 5}}
            fill={focused ? '#B9995A' : '#1f1f1f'}
          />
        );
      }}
      style={tabStyle}
    />

【问题讨论】：

标签： react-native-ui-kitten

【解决方案1】：

只听状态索引，用 if 语句改变颜色

const HomeIcon = (props) => (<Icon name={state.index == 0 ? 'home' : 'home-outline'} fill={state.index == 0 ? '#000' : ''#eee} />)

<BottomNavigation
        selectedIndex={state.index}
        onSelect={index => {
          setTabIndex(index)
          navigation.navigate(state.routeNames[index])
          }}>
        <BottomNavigationTab title="Home" icon={HomeIcon}/>
        <BottomNavigationTab title="Search" icon={SearchIcon}/>
</BottomNavigation>

【讨论】：