代码之家 › 专栏 › 技术社区 › CraZyDroiD

更改所选选项卡的图标颜色-反应本机路由器流量

react-native-router-flux react-native reactjs

CraZyDroiD · 技术社区 · 6 年前

在我的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个图标的组件。如何更改所选图标的颜色?

1 回复 | 直到 6 年前

Roozbeh Mohammadzadeh 6 年前

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