React Native入门十之导航组件React Navigation2TabNavigator

前言

在上一篇博客，了解了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 bar
• tabBarPosition - 设置tab bar的位置,可以是 ‘top’ 或者 ‘bottom’
• swipeEnabled - 是否允许滑动切换tab
• animationEnabled - 在切换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，默认为false
• showLabel - 是否显示tab的label，默认为true
• upperCaseLabel - 是否将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: '第一条新闻'},]}
      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},},{
  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的用法！ 好了，先这样，下一篇再见！