前面写了一篇StackNavigator的用法http://blog.csdn.net/chaoyangsun/article/details/79262203
本文主要介绍TabNavigator的用法,官方API https://reactnavigation.org/docs/tab-navigator.html
一般情况下TabNavigator和StackNavigator配合来用,用法如下:
const App = TabNavigator(
{
Main:{
screen:MainStack,
navigationOptions:{//设置单个tab样式
tabBarIcon:({focused}) => {
const p = focused ? require('./img/smile.png') : require('./img/cry.png');//根据焦点加载不同的图片
return <Image source={p} style={styles.img}/>;
}
}
},
Middle:{
screen:MiddleStack,
navigationOptions: ({navigation}) => ({
tabBarIcon:({focused,tintColor}) => {
const p = focused ? require('./img/in_mid.png') : require('./img/out_mid.png');
return <Image source={p} style={styles.img}/>;
}
})
},
Settings:{
screen:SettingsStack,
navigationOptions: ({navigation}) => ({
tabBarIcon:({focused,tintColor}) => {
const p = focused ? require('./img/in_set.png') : require('./img/out_set.png');
return <Image source={p} style={styles.img}/>;
}
})
}
},//上面这些设置各个tab对应的界面,可能是一个界面,也可能是一个StackNavigator
{
tabBarOptions:{
style: {
height:49
},
activeTintColor:'#1092ee',//有焦点时的颜色
inactiveTintColor:'gray',//无焦点时的颜色
},
tabBarComponent:TabBarBottom,
tabBarPosition:'bottom',//tab的位置,默认在上面
swipeEnabled:false,
animationEnabled:false,
},//上面这些是设置tab样式,详细可查看API
);
export default App;
这里有一个比较全面的demo https://github.com/chaoyangsun/ReactNativeDemo.git