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>
  }
}

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

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 drawer
this.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。
好了，先这样，下一篇再见！