前言
在上一篇博客，了解了React Navigation导航库的StackNavigator的用法，主要用来页面的跳转和标题栏的设置！本篇就来了解一下这个导航库中第二个组件TabNavigator的用法！
使用
TabNavigator组件呢，看名字Tab就大致可以知道它是一个标签式的导航组件。这个组件呢在Android和iOS平台有不同的显示效果，而且呢在Android平台默认是在上边，（非常类似TabLayout），在iOS平台是在下边显示！
好，下边来看一下简单的使用：
import {TabNavigator} from "react-navigation";//先引入组件
class NewsScreen extends Component {
render() {
return <FlatList
style={{padding: 10}}
data={[{key: '第一条新闻'},
{key: '第二条新闻'},
{key: '第三条新闻'},
{key: '第四条新闻'},
{key: '第五条新闻'},
]}
renderItem={({item}) => {
return (
<Text style={{padding: 5, fontSize: 15}}>{item.key}</Text>
)
}}
/>
}
}
class VideoScreen extends Component {
render() {
return <Text>视频列表</Text>
}
}
//设置TabNavigator
const MainScreenNavigator = TabNavigator({
新闻: {screen: NewsScreen},
视频: {screen: VideoScreen},
})
AppRegistry.registerComponent('AwesomeProject', () => MainScreenNavigator );使用呢，非常简单，首先引入组件，然后写两个Tab页面，然后使用TabNavigator()设置路由即可！
一个简单的TabNavigator导航就完成了！
配置
当然，我们在具体使用的时候不会就这么简单的使用默认的样式等内容，我们可以自己配置需要的内容！
TabNavigator(RouteConfigs, TabNavigatorConfig)RouteConfigs路由设置
路由设置呢，这里就不再提了，具体的跟前边 StackNavigator中的路由设置配置一样！
需要了解的可以参考上一篇文章！或者到官网查看相关API！
TabNavigatorConfig标签导航设置
tabBarComponent- 自定义组件来设置自己的tab bartabBarPosition- 设置tab bar的位置, 可以是 ‘top’ 或者 ‘bottom’swipeEnabled- 是否允许滑动切换tabanimationEnabled- 在切换tab时是否展示动画lazy- 是否懒加载tabBarOptions- tab bar的设置选项
下边的可选项可传递到潜在路由来改变导航逻辑:
initialRouteName- 第一次加载时初始化tab的路由名字order- 定义tabs顺序的路由名字数组paths- 重写routeConfigs.backBehavior-设置返回键的行为
tabBarOptions选项
在我们自己没有设置tabBarComponent的情况下，默认iOS平台下是TabBarBottom , Android平台下是TabBarTop ！两个平台的tabbar设置的参数不同，这里说一下Android平台的TabBarTop可以设置的参数，iOS平台的设置参数可以到官网查看：tabBarOptions for TabBarBottom (default tab bar on iOS)
下面是Android平台默认的TabBarTop可以设置的参数：
activeTintColor- 选中标签的label和icon颜色inactiveTintColor- 非选中标签的label和icon颜色showIcon- 是否显示tab的icon，默认为falseshowLabel- 是否显示tab的label，默认为trueupperCaseLabel- 是否将label显示为大写，默认为true（这里要是英文的话，会全部大写）pressColor- 按压tab时的波纹效果颜色(Android >= 5.0 only)pressOpacity- 按压tab时的透明度(iOS and Android < 5.0 only)scrollEnabled- 设置是否可以滑动tabStyle- 设置每一个tab的样式indicatorStyle- 设置tab下边指示器的样式labelStyle- 设置tab的label的样式iconStyle- 设置tab的icon的样式style- 设置整个tab bar的样式
好了，上边基本上就是TabNavigator全部的内容了！
下面，我们结合StackNavigator来看一个完整的例子：
先来看一下效果：
demo:
import {TabNavigator} from "react-navigation";//引入
class NewsScreen extends Component {
render() {
const {navigate} = this.props.navigation;
return <FlatList
style={{padding: 10}}
data={[{key: '第一条新闻'},
{key: '第二条新闻'},
{key: '第三条新闻'},
{key: '第四条新闻'},
{key: '第五条新闻'},
]}
renderItem={({item}) => {
return (
<TouchableOpacity
activeOpacity={0.5}
//点击列表，跳转页面且传值
onPress={() => navigate('NewsContent', {hello: item.key})}>
<Text style={{padding: 5, fontSize: 15}}>{item.key}</Text>
</TouchableOpacity>
)
}}
/>
}
}
class NewsContentScreen extends Component {
render() {
const {params} = this.props.navigation.state;
return (
<View style={{padding: 10}}>
//得到传递的数据
<Text style={{fontSize: 20, fontWeight: 'bold', alignSelf: 'center'}}>{params.hello}</Text>
<Text>
我是具体的新闻内容！{'\n'}
啊啊啊啊啊啊啊啊啊啊啊啊{'\n'}
...
</Text>
</View>
);
}
}
class VideoScreen extends Component {
render() {
return <Text>视频列表</Text>
}
}
//设置TabNavigator
const MainScreenNavigator = TabNavigator({
新闻: {screen: NewsScreen},
视频: {screen: VideoScreen},
},{
tabBarPosition:'top',//设置位置
tabBarOptions: {
activeTintColor:'firebrick',//设置选中标签颜色
inactiveTintColor:'gray',//设置非选择标签颜色
labelStyle: {//设置标签label样式
fontSize: 15,
},
indicatorStyle:{//设置标签指示器样式
backgroundColor:'firebrick'
},
/*tabStyle: {
width: 100,//设置每一个tab的宽度，如果不设置则默认均分
},*/
style: {//设置整个tab bar的样式
backgroundColor: 'white',
},
}
});
//设置StackNavigator
const SimpleApp = StackNavigator({
Home: {
screen: MainScreenNavigator,
navigationOptions: {
title: '今日头条',//设置导航栏的标题
headerTintColor:'white',//设置header的渲染颜色
/*headerTitleStyle:{
color:'white' //这里和上边设置颜色是一样的，用其中一个即可
},*/
headerStyle:{//设置header的样式
backgroundColor:'firebrick',
}
}
},
NewsContent: {
screen: NewsContentScreen,
navigationOptions: ({navigation}) => ({
title: `${navigation.state.params.hello}`,
}),
},
});
AppRegistry.registerComponent('AwesomeProject', () => SimpleApp);结语
本篇文章了解了导航组件库React Navigation中TabNavigator标签组件的使用，并结合上一篇中的StackNavigator写了一个简单的demo。下一篇文章会来了解一下最后一个DrawerNavigator的用法！
好了，先这样，下一篇再见！