react-native-ui-kitten - 选择时如何更改底部标签导航图标的颜色？

Question

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

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

Answer 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>