React Native——react-navigation的使用-白红宇

React Native——react-navigation的使用

阅读量：6404 次

发布时间：2019-06-23

本文共 11927 字，大约阅读时间需要 39 分钟。

在 React Native 中，官方已经推荐使用 react-navigation 来实现各个界面的跳转和不同板块的切换。 react-navigation 主要包括三个组件：

StackNavigator 导航组件

TabNavigator 切换组件

DrawerNavigator 抽屉组件

StackNavigator 用于实现各个页面之间的跳转， TabNavigator 用来实现同一个页面上不同界面的切换， DrawerNavigator 可以实现侧滑的抽屉效果。

StackNavigator

StackNavigator 组件采用堆栈式的页面导航来实现各个界面跳转。它的构造函数：

StackNavigator(RouteConfigs, StackNavigatorConfig)

有 RouteConfigs 和 StackNavigatorConfig 两个参数。

RouteConfigs

RouteConfigs 参数表示各个页面路由配置，类似于android原生开发中的 AndroidManifest.xml ，它是让导航器知道需要导航的路由对应的页面。

const RouteConfigs = {    Home: {        screen: HomePage,        navigationOptions: ({navigation}) => ({            title: '首页',        }),    },    Find: {        screen: FindPage,        navigationOptions: ({navigation}) => ({            title: '发现',        }),    },    Mine: {        screen: MinePage,        navigationOptions: ({navigation}) => ({            title: '我的',        }),    },};

这里给导航器配置了三个页面， Home 、 Find 、 Mine 为路由名称， screen 属性值 HomePage 、 FindPage 、 MinePage 为对应路由的页面。

navigationOptions 为对应路由页面的配置选项：

title - 可以作为头部标题 headerTitle ，或者Tab标题 tabBarLabelheader - 自定义的头部组件，使用该属性后系统的头部组件会消失headerTitle - 头部的标题，即页面的标题headerBackTitle - 返回标题，默认为 titleheaderTruncatedBackTitle - 返回标题不能显示时（比如返回标题太长了）显示此标题，默认为 “Back”headerRight - 头部右边组件headerLeft - 头部左边组件headerStyle - 头部组件的样式headerTitleStyle - 头部标题的样式headerBackTitleStyle - 头部返回标题的样式headerTintColor - 头部颜色headerPressColorAndroid - Android 5.0 以上MD风格的波纹颜色gesturesEnabled - 否能侧滑返回， iOS 默认 true ， Android 默认 false

StackNavigatorConfig

StackNavigatorConfig 参数表示导航器的配置，包括导航器的初始页面、各个页面之间导航的动画、页面的配置选项等等：

const StackNavigatorConfig = {    initialRouteName: 'Home',    initialRouteParams: {initPara: '初始页面参数'},    navigationOptions: {        title: '标题',        headerTitleStyle: {fontSize: 18, color: '#666666'},        headerStyle: {height: 48, backgroundColor: '#fff'},    },    paths: 'page/main',    mode: 'card',    headerMode: 'screen',    cardStyle: {backgroundColor: "#ffffff"},    transitionConfig: (() => ({        screenInterpolator: CardStackStyleInterpolator.forHorizontal,    })),    onTransitionStart: (() => {        console.log('页面跳转动画开始');    }),    onTransitionEnd: (() => {        console.log('页面跳转动画结束');    }),};initialRouteName - 导航器组件中初始显示页面的路由名称，如果不设置，则默认第一个路由页面为初始显示页面initialRouteParams - 给初始路由的参数，在初始显示的页面中可以通过 this.props.navigation.state.params 来获取navigationOptions - 路由页面的配置选项，它会被 RouteConfigs 参数中的 navigationOptions 的对应属性覆盖。paths - 路由中设置的路径的覆盖映射配置mode - 页面跳转方式，有 card 和 modal 两种，默认为 card ：card - 原生系统默认的的跳转modal - 只针对iOS平台，模态跳转headerMode - 页面跳转时，头部的动画模式，有 float 、 screen 、 none 三种：float - 渐变，类似iOS的原生效果screen - 标题与屏幕一起淡入淡出none - 没有动画cardStyle - 为各个页面设置统一的样式，比如背景色，字体大小等transitionConfig - 配置页面跳转的动画，覆盖默认的动画效果onTransitionStart - 页面跳转动画即将开始时调用onTransitionEnd - 页面跳转动画一旦完成会马上调用

页面的配置选项 navigationOptions 通常还可以在对应页面中去静态配置，比如在 HomePage 页面中：

export default class HomePage extends Component {    // 配置页面导航选项    static navigationOptions = ({navigation}) => ({        title: 'HOME',        titleStyle: {color: '#ff00ff'},        headerStyle:{backgroundColor:'#000000'}    });    render() {        return (            
             )    };}

同样地，在页面里面采用静态的方式配置 navigationOptions 中的属性，会覆盖 StackNavigator 构造函数中两个参数 RouteConfigs 和 StackNavigatorConfig 配置的 navigationOptions 里面的对应属性。 navigationOptions 中属性的优先级是：

页面中静态配置 > RouteConfigs > StackNavigatorConfig

有了 RouteConfigs 和 StackNavigatorConfig 两个参数，就可以构造出一个导航器组件 StackNavigator ，直接引用该组件：

const Navigator = StackNavigator(RouteConfigs, StackNavigatorConfig);export default class MainComponent extends Component {    render() {        return (            
             )    };}

已经配置好导航器以及对应的路由页面了，但是要完成页面之间的跳转，还需要 navigation。

navigation

在导航器中的每一个页面，都有 navigation 属性，该属性有以下几个属性/方法：

navigate - 跳转到其他页面state - 当前页面导航器的状态setParams - 更改路由的参数goBack - 返回dispatch - 发送一个action

navigete

调用这个方法可以跳转到导航器中的其他页面，此方法有三个参数：

— routeName 导航器中配置的路由名称— params 传递参数到下一个页面— action action比如： this.props.navigation.navigate('Find', {param: 'i am the param'});

state

state 里面包含有传递过来的参数 params 、 key 、路由名称 routeName ，打印log可以看得到：

{   params: { param: 'i am the param' },  key: 'id-1500546317301-1',  routeName: 'Mine' }

setParams

更改当前页面路由的参数，比如可以用来更新头部的按钮或者标题。

componentDidMount() {    this.props.navigation.setParams({param:'i am the new param'})}

goBack

回退，可以不传，也可以传参数，还可以传 null 。

this.props.navigation.goBack();       // 回退到上一个页面this.props.navigation.goBack(null);   // 回退到任意一个页面this.props.navigation.goBack('Home'); // 回退到Home页面

TabNavigator

TabNavigator ，即是Tab选项卡，类似于原生 android 中的 TabLayout ，它的构造函数：

TabNavigator(RouteConfigs, TabNavigatorConfig)

api和 StackNavigator 类似，参数 RouteConfigs 是路由配置，参数 TabNavigatorConfig是Tab选项卡配置。

RouteConfigs

路由配置和 StackNavigator 中是一样的，配置路由以及对应的 screen 页面， navigationOptions 为对应路由页面的配置选项：

title - Tab标题，可用作 headerTitle 和 tabBarLabel 回退标题tabBarVisible - Tab的是否可见，没有设置的话默认为 truetabBarIcon - Tab的icon组件，可以根据 {focused: boolean, tintColor: string} 方法来返回一个icon组件tabBarLabel - Tab中显示的标题字符串或者组件，也可以根据 { focused: boolean, tintColor: string } 方法返回一个组件

TabNavigatorConfig

tabBarComponent - Tab选项卡组件，有 TabBarBottom 和 TabBarTop 两个值，在iOS中默认为 TabBarBottom ，在Android中默认为 TabBarTop 。TabBarTop - 在页面的顶部TabBarBottom - 在页面的底部tabBarPosition - Tab选项卡的位置，有 top 或 bottom 两个值swipeEnabled - 是否可以滑动切换Tab选项卡animationEnabled - 点击Tab选项卡切换界面是否需要动画lazy - 是否懒加载页面initialRouteName - 初始显示的Tab对应的页面路由名称order - 用路由名称数组来表示Tab选项卡的顺序，默认为路由配置顺序paths - 路径配置backBehavior - androd点击返回键时的处理，有 initialRoute 和 none 两个值initailRoute - 返回初始界面none - 退出tabBarOptions - Tab配置属性，用在 TabBarTop 和 TabBarBottom 时有些属性不一致：用于 TabBarTop 时：activeTintColor - 选中的文字颜色inactiveTintColor - 未选中的文字颜色showIcon - 是否显示图标，默认显示showLabel - 是否显示标签，默认显示upperCaseLabel - 是否使用大写字母，默认使用pressColor - android 5.0以上的MD风格波纹颜色pressOpacity - android 5.0以下或者iOS按下的透明度scrollEnabled - 是否可以滚动tabStyle - 单个Tab的样式indicatorStyle - 指示器的样式labelStyle - 标签的样式iconStyle - icon的样式style - 整个TabBar的样式用于 TabBarBottom 时：activeTintColor - 选中Tab的文字颜色activeBackgroundColor - 选中Tab的背景颜色inactiveTintColor - 未选中Tab的的文字颜色inactiveBackgroundColor - 未选中Tab的背景颜色showLabel - 是否显示标题，默认显示style - 整个TabBar的样式labelStyle - 标签的样式tabStyle - 单个Tab的样式

底部Tab导航示例

import React, {Component} from 'react';import {StackNavigator, TabBarBottom, TabNavigator} from "react-navigation";import HomeScreen from "./index18/HomeScreen";import NearByScreen from "./index18/NearByScreen";import MineScreen from "./index18/MineScreen";import TabBarItem from "./index18/TabBarItem";export default class MainComponent extends Component {    render() {        return (            
             );    }}const TabRouteConfigs = {    Home: {        screen: HomeScreen,        navigationOptions: ({navigation}) => ({            tabBarLabel: '首页',            tabBarIcon: ({focused, tintColor}) => (                
                 ),        }),    },    NearBy: {        screen: NearByScreen,        navigationOptions: {            tabBarLabel: '附近',            tabBarIcon: ({focused, tintColor}) => (                
                 ),        },    }    ,    Mine: {        screen: MineScreen,        navigationOptions: {            tabBarLabel: '我的',            tabBarIcon: ({focused, tintColor}) => (                
                 ),        },    }};const TabNavigatorConfigs = {    initialRouteName: 'Home',    tabBarComponent: TabBarBottom,    tabBarPosition: 'bottom',    lazy: true,};const Tab = TabNavigator(TabRouteConfigs, TabNavigatorConfigs);const StackRouteConfigs = {    Tab: {        screen: Tab,    }};const StackNavigatorConfigs = {    initialRouteName: 'Tab',    navigationOptions: {        title: '标题',        headerStyle: {backgroundColor: '#5da8ff'},        headerTitleStyle: {color: '#333333'},    }};const Navigator = StackNavigator(StackRouteConfigs, StackNavigatorConfigs);

顶部Tab选项卡示例

import React, {Component} from "react";import {StackNavigator, TabBarTop, TabNavigator} from "react-navigation";import HomeScreen from "./index18/HomeScreen";import NearByScreen from "./index18/NearByScreen";import MineScreen from "./index18/MineScreen";export default class MainComponent extends Component {    render() {        return (            
             );    }}const TabRouteConfigs = {    Home: {        screen: HomeScreen,        navigationOptions: ({navigation}) => ({            tabBarLabel: '首页',        }),    },    NearBy: {        screen: NearByScreen,        navigationOptions: {            tabBarLabel: '附近',        },    }    ,    Mine: {        screen: MineScreen,        navigationOptions: {            tabBarLabel: '我的',        },    }};const TabNavigatorConfigs = {    initialRouteName: 'Home',    tabBarComponent: TabBarTop,    tabBarPosition: 'top',    lazy: true,    tabBarOptions: {}};const Tab = TabNavigator(TabRouteConfigs, TabNavigatorConfigs);const StackRouteConfigs = {    Tab: {        screen: Tab,    }};const StackNavigatorConfigs = {    initialRouteName: 'Tab',    navigationOptions: {        title: '标题',        headerStyle: {backgroundColor: '#5da8ff'},        headerTitleStyle: {color: '#333333'},    }};const Navigator = StackNavigator(StackRouteConfigs, StackNavigatorConfigs);

DrawerNavigator

在原生Android MD 风格里面很多app都会采用侧滑抽屉来做主页面的导航，利用 DrawerNavigator 在RN中可以很方便来实现抽屉导航.

DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

和 DrawerNavigator 的构造函数一样，参数配置也类似。

RouteConfigs

抽屉导航的路由配置 RouteConfigs ，和 TabNavigator 的路由配置完全一样， screen 配置对应路由页面， navigationOptions 为对应页面的抽屉配置选项：

title - 抽屉标题，和 headerTitle 、 drawerLabel 一样

drawerLabel - 标签字符串，或者自定义组件，可以根据 { focused: boolean, tintColor: string } 函数来返回一个自定义组件作为标签

drawerIcon - 抽屉icon，可以根据 { focused: boolean, tintColor: string } 函数来返回一个自定义组件作为icon

DrawerNavigatorConfig

抽屉配置项属性：

drawerWidth - 抽屉宽度，可以使用Dimensions获取屏幕的宽度，动态计算drawerPosition - 抽屉位置，可以是 left 或者 rightcontentComponent - 抽屉内容组件，可以自定义侧滑抽屉中的所有内容，默认为 DrawerItemscontentOptions - 用来配置抽屉内容的属性。当用来配置 DrawerItems 是配置属性选项：items - 抽屉栏目的路由名称数组，可以被修改activeItemKey - 当前选中页面的key idactiveTintColor - 选中条目状态的文字颜色activeBackgroundColor - 选中条目的背景色inactiveTintColor - 未选中条目状态的文字颜色inactiveBackgroundColor - 未选中条目的背景色onItemPress(route) - 条目按下时会调用此方法style - 抽屉内容的样式labelStyle - 抽屉的条目标题/标签样式initialRouteName - 初始化展示的页面路由名称order - 抽屉导航栏目顺序，用路由名称数组表示paths - 路径backBehavior - androd点击返回键时的处理，有initialRoute和none两个值， initailRoute：返回初始界面， none ：退出

抽屉导航示例

import React, {Component} from 'react';import {DrawerNavigator, StackNavigator, TabBarBottom, TabNavigator} from "react-navigation";import HomeScreen from "./index18/HomeScreen";import NearByScreen from "./index18/NearByScreen";import MineScreen from "./index18/MineScreen";import TabBarItem from "./index18/TabBarItem";export default class MainComponent extends Component {    render() {        return (            
             );    }}const DrawerRouteConfigs = {    Home: {        screen: HomeScreen,        navigationOptions: ({navigation}) => ({            drawerLabel : '首页',            drawerIcon : ({focused, tintColor}) => (                
                 ),        }),    },    NearBy: {        screen: NearByScreen,        navigationOptions: {            drawerLabel : '附近',            drawerIcon : ({focused, tintColor}) => (                
                 ),        },    },    Mine: {        screen: MineScreen,        navigationOptions: {            drawerLabel : '我的',            drawerIcon : ({focused, tintColor}) => (                
                 ),        },    }};const DrawerNavigatorConfigs = {    initialRouteName: 'Home',    tabBarComponent: TabBarBottom,    tabBarPosition: 'bottom',    lazy: true,    tabBarOptions: {}};const Drawer = DrawerNavigator(DrawerRouteConfigs, DrawerNavigatorConfigs);const StackRouteConfigs = {    Drawer: {        screen: Drawer,    }};const StackNavigatorConfigs = {    initialRouteName: 'Drawer',    navigationOptions: {        title: '标题',        headerStyle: {backgroundColor: '#5da8ff'},        headerTitleStyle: {color: '#333333'},    }};const Navigator = StackNavigator(StackRouteConfigs, StackNavigatorConfigs);

源码：（index20.js、index21.js、index22.js）