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

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>