先上代码如下
// 注册tabs
const Tabs = TabNavigator({
HomeTab: {
screen: MainScreen,
navigationOptions: { // 也可以写在组件的static navigationOptions内
tabBarLabel:'首页',//tab一的名称
tabBarIcon:({tintColor}) =>
(<Text style={[styles.bottomBarIcon,{fontFamily:'iconfont'},{color:tintColor}]}></Text>)//这是名称上面要渲染的组件
}
},
BillTab: {
screen: MainScreen1,
navigationOptions: {
tabBarLabel:'账单',
tabBarIcon:({tintColor}) =>
(<Text style={[styles.bottomBarIcon,{fontFamily:'iconfont'},{color:tintColor}]}></Text>)
}
}
}, {
animationEnabled: true, // 切换页面时是否有动画效果
tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的
swipeEnabled: true, // 是否可以左右滑动切换tab
backBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
tabBarOptions: {
activeTintColor: '#ff8500', // 文字和图片选中颜色
inactiveTintColor: '#999', // 文字和图片未选中颜色
showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
indicatorStyle: {
height: 4 // 如TabBar下面显示有一条线，可以设高度为0后隐藏
},
style: {//这个样式是对整个tabNavigator生效的。
backgroundColor: '#fff', // TabBar 背景色
height: 60
},
labelStyle: {
fontSize: 10, // 文字大小
},
},
});
看这些注释已经够清楚了，通过代码切换tab方法：this.props.navigation.navigate('BillTab')，这样就切换过去，这里注意不要用全局的nav就可以了
RN navigation——tabNavigator（四）
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- react-navigation导航组件使用详解 注意了，如果有小伙伴们发现运行作者提供的react-naviga...
- title: 翻译|React-navigation导航系统(2)date: 2017-03-28 07:48:3...
- react-native.jpeg 本文是基于最新的react-navigation^2.9.1来书写的。 如果遇...
- #最强大脑#中微观辨识韩国小姐的杨冠新，面对60多位长相相似的韩国女孩，在两两合成一千多张面孔中，准确进行辨认，成...
