React Native入门（十）之导航组件React Navigation（2）TabNavigator和DrawerNavigator

前言

在上一篇博客，了解了React Navigation导航库的StackNavigator的用法，主要用来页面的跳转和标题栏的设置！本篇就来了解一下这个导航库中其他两个组件TabNavigator和DrawerNavigator的用法！

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>  }}//设置TabNavigatorconst 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: '第一条新闻'},        {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>  }}//设置TabNavigatorconst 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',    },  }});//设置StackNavigatorconst 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);

DrawerNavigator

使用

DrawerNavigator是一个抽屉导航组件，这个设计在Android中是比较常见的，类似Android中的DrawerLayout，但是在iOS中比较少见抽屉导航，所以在Android中RN专门推出一个DrawerLayoutAndroid组件来更好的实现Android中抽屉导航的使用！这个组件我们之后再做了解！

下面简单看一下DrawerNavigator的使用：
首先看一个例子：

import {DrawerNavigator} from "react-navigation";class MyHomeScreen extends React.Component {  static navigationOptions = {    drawerLabel: '主页',    drawerIcon: ({tintColor}) => (      <Image        source={require('./img/flyme5_logo.png')}        style={[drawerStyles.icon, {tintColor: tintColor}]}      />    ),  };  render() {    return (      <View>        <Text>我是主页</Text>        <Button          onPress={() => this.props.navigation.navigate('DrawerOpen')}          title="打开侧滑导航菜单"        />      </View>    );  }}class MyNotificationsScreen extends React.Component {  static navigationOptions = {    drawerLabel: '通知',    drawerIcon: ({tintColor}) => (      <Image        source={require('./img/flyme5_logo.png')}        style={[drawerStyles.icon, {tintColor: tintColor}]}      />    ),  };  render() {    return (      <View>        <Text>我是通知页</Text>        <Button          onPress={() => this.props.navigation.goBack()}          title="返回主页"        />      </View>    );  }}class MyFriendCircleScreen extends React.Component {  static navigationOptions = {    drawerLabel: '朋友圈',    drawerIcon: ({tintColor}) => (      <Image        source={require('./img/flyme5_logo.png')}        style={[drawerStyles.icon, {tintColor: tintColor}]}      />    ),  };  render() {    return (      <View>        <Text>我是朋友圈</Text>        <Button          onPress={() => this.props.navigation.goBack()}          title="返回主页"        />      </View>    );  }}const drawerStyles = StyleSheet.create({  icon: {    width: 24,    height: 24,  },});const DrawerApp = DrawerNavigator({  Home: {    screen: MyHomeScreen,  },  Notifications: {    screen: MyNotificationsScreen,  },  FriendCircle: {    screen: MyFriendCircleScreen,  },});AppRegistry.registerComponent('AwesomeProject', () => DrawerApp);

使用非常简单，首先导入组件，然后写三个页面，每一个页面在navigationOptions中设置了抽屉导航中显示的label和icon，最后在DrawerNavigator()设置一下路由，一个简单的抽屉导航就完成了！

需要注意的地方：
①我们可以右滑来打开抽屉菜单，也可以在代码中控制：

this.props.navigation.navigate('DrawerOpen'); // open drawerthis.props.navigation.navigate('DrawerClose'); // close drawer

②想要在跳转页面，同样的：

this.props.navigation.navigate('FriendCircle')

参数为设置路由的时候的routeName！

配置

我们在具体的使用的时候，当然不可能就这么简单的使用它原来的样子，那么DrawerNavigator可以配置哪些内容？

API方法：

DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

RouteConfigs 路由设置

这里也是相同的，不再提了！

DrawerNavigatorConfig 抽屉导航配置

• drawerWidth - 抽屉的宽
• drawerPosition - 抽屉的位置，可以是left或者right. 默认是 left .

• contentComponent - 用来渲染抽屉内容的组件, 比如, navigation items. 接收抽屉的导航属性. 默认是为 DrawerItems.
  比如默认的DrawerView是不可滚动的，我们可以使用contentComponent来自定义抽屉容器：

  {  drawerWidth: 200,  drawerPosition: 'right',  <ScrollView>     <DrawerItems {...props} />  </ScrollView>}

  另外DrawerItems，我们需要先导入import { DrawerItems } from 'react-navigation';

• contentOptions - 抽屉内容的配置

contentOptions选项

• items - 路由数组，可以被修改或者重写
• activeItemKey - 定义选中路由的key
• activeTintColor - 选中导航时label和icon颜色
• activeBackgroundColor - 选中导航时的背景颜色
• inactiveTintColor - 非选中导航时label和icon颜色
• inactiveBackgroundColor - 非选中导航时的背景颜色
• onItemPress(route) - 当按压一个item时要调用的方法
• style - 抽屉内容的style
• labelStyle - 抽屉label的样式，当label是字符串时，它会覆盖抽屉内容style里边Text的样式。

进阶内容

进阶的内容主要包括Navigation Prop和NavigationActions，这两块内容主要是涉及理论上的东西，所以不再详细介绍了，我觉得也是比较好理解的，需要的可以去查看官方文档！

Navigation Prop

每一个使用这个导航库组件配置的页面，都会接收一个Navigation Prop，里边包括了:navigate(routeName, params, action)，state，setParams()，goBack()和dispatch(action)这5部分内容！

官方文档：Screen Navigation Prop

NavigationActions

这个主要是上边dispatch(action)中会用到，用来设置路由的幕后执行事件！
可接收的事件类型有：Navigate()，Reset()，Back()，Set Params()和Init。

官方文档：Navigation Actions

结语

本篇文章了解了导航组件库React Navigation中TabNavigator标签组件和DrawerNavigator抽屉导航组件的使用，并结合上一篇中的StackNavigator写了一个简单的demo。
好了，先这样，下一篇再见！