更改所选标签的图标颜色-react-native-router-flux

Question

在我的reactNative移动应用程序中，我使用如下的底部导航，该导航使用react-native-router-flux 。

     <Tabs
             key="tabbar"
             showLabel={false}
             tabBarComponent={BottomNavigation}
             tabBarPosition="bottom"
             animationEnabled={false}
             lazy
             hideNavBar
     >

                <Scene key="search" component={SearchPageContainer} navBar={SearchNavBar}/>
                <Scene key="home" component={HomePageContainer} title="MyApp" titleStyle={titleStyle} navigationBarStyle={navigationBarStyle_general}/>
                <Scene key="myGroups" component={MyGroupsContainer} navBar={MyGroupsNavBar}/>
                <Scene key="moreNavigation" component={MoreNavigationContainer} hideNavBar/>
                <Scene key="notifications" component={NotificationsContainer} title="Notifications" titleStyle={titleStyle} navigationBarStyle={navigationBarStyle_general}/>


</Tabs>

BottomNavigation是该组件，每个组件都有5个图标。 如何更改所选图标的颜色？

Answer 1

class TabIcon extends React.Component {
    render(){
        return (
            <Icon style={{color: this.props.focused ? '#8B327C' :'#3F8B99'}} name={this.props.name}></Icon>
        );
    }
}

并将icon = {TabIcon}和name =“ cart”放在您对每个工作的场景中，如下所示：

import { Icon} from 'native-base';
    class TabIcon extends React.Component {
            render(){
                return (
                    <Icon style={{color: this.props.focused ? '#8B327C' :'#3F8B99'}} name={this.props.name}></Icon>
                );
            }
        }




        export default class App extends React.Component {

          render() {
            const  RouterWithRedux = connect()(Router);
              return (            
                <Provider store={store}>
                <RouterWithRedux>

                   ....

                  {/* tabbar   */}
                  <Scene
                    type={ActionConst.REPLACE}
                    tabs
                    animationEnabled={true}
                    key="tabbar"
                    activeTintColor='#8d6669'
                    headerMode="none"
                    tabBarPosition='bottom'
                    tabBarStyle={{height:60}}
                    labelStyle={{fontSize:10, fontFamily:"IRANSansMobile"}}
                  >
                  <Scene
                    key="user"
                    component={user}
                    activeTintColor={"#8d6669"}
                    icon={TabIcon} name="person"
                    tabBarLabel={"پروفایل کاربری"}
                  >
                  <Scene key="login" component={login}/>
                  <Scene key="profile" component={profile}/>

                  </Scene>
                  <Scene
                    key="fav"
                    component={fav}
                    icon={TabIcon}
                    name="cart"
                    tabBarLabel={"بازارچه"}
                  /> 
                   <Scene
                    key="events"
                    component={events}
                    icon={TabIcon}
                    name="list-box"
                    tabBarLabel={"رویداد ها"}
                  />                    
                  <Scene
                    key="location"
                    component={location}
                    icon={TabIcon}
                    name="map"
                    tabBarLabel={"نقشه"}
                  />
                  <Scene
                    key="home"
                    component={home}
                    icon={TabIcon}
                    name="home"
                    tabBarLabel={"صفحه اصلی"}
                  >

                  </Scene>  
                 ....

                </RouterWithRedux>
              </Provider>
              )
          }