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



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

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>
)
}

最新更新