React-Native开发之reactnavigation库详解

众所周知，在多页面应用程序中，页面的跳转是通过路由或导航器来实现的。在 0.44 版本之前，开发者可以直接使用官方提供的 Navigator 组件来实现页面的跳转，不过从 0.44 版本开始，Navigator 被官方从 react native 的核心组件库中剥离出来，放到 react-native-deprecated-custom-components 的模块中。
如果开发者需要继续使用 Navigator，则需要先使用 yarn add react-native-deprecated-custom-components 命令安装后再使用。不过，官方并不建议开发者这么做，而是建议开发者直接使用导航库 react-navigation。react-navigation 是 React Native 社区非常著名的页面导航库，可以用来实现各种页面的跳转操作。
目前，react-navigation 支持三种类型的导航器，分别是 StackNavigator、TabNavigator 和 DrawerNavigator。具体区别如下：

• StackNavigator：包含导航栏的页面导航组件，类似于官方的 Navigator 组件。
• TabNavigator：底部展示 tabBar 的页面导航组件。
• DrawerNavigator：用于实现侧边栏抽屉页面的导航组件。

需要说明的是，由于 react-navigation 在 3.x 版本进行了较大的升级，所以在使用方式上与 2.x 版本会有很多的不同。
和其他的第三方插件库一样，使用之前需要先在项目汇中添加 react-navigation 依赖，安装的命令如下：

yarn add react-navigation
// 或者
npm install react-navigation --save

安装完成之后，可以在 package.json 文件的 dependencies 节点看到 react-navigation 的依赖信息。

"react-navigation": "^3.8.1"

由于 react-navigation 依赖于 react-native-gesture-handler 库，所以还需要安装 react-native-gesture-handler，安装的命令如下：

yarn add react-native-gesture-handler
// 获取
npm install --save react-native-gesture-handle

同时，由于 react-native-gesture-handler 需要依赖原生环境，所以在需要使用 link 命令链接原生依赖，命令如下：

react-native link react-native-gesture-handler

为了保证 react-native-gesture-handler 能够成功的运行在 Android 系统上，需要在 Android 工程的 MainActivity.java 中添加如下代码：

public class MainActivity extends ReactActivity {
    ...
    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {return new ReactActivityDelegate(this, getMainComponentName()) {
            @Override
            protected ReactRootView createRootView() {return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }
        };
    }
}

然后，就可以使用 react-navigation 进行页面导航功能开发，如图 7 -12 所示，是使用 createStackNavigator 实现页面导航的示例。

在 createStackNavigator 模式下，为了方便对页面进行统一管理，首先新建一个 RouterConfig.js 文件，并使用 createStackNavigator 注册页面。对于应用的初始页面还需要使用 initialRouteName 进行申明。同时，导航器栈还需要使用 createAppContainer 函数进行包裹。例如：

import {createAppContainer,createStackNavigator} from 'react-navigation';

import MainPage from './MainPage'
import DetailPage from "./DetailPage";

const AppNavigator = createStackNavigator({
    MainPage: MainPage,       
    DetailPage:DetailPage
},{initialRouteName: "MainPage",},
);
export default createAppContainer(AppNavigator);

其中，createStackNavigator 用于配置栈管理的页面，它支持的配置选项有：

• path：路由中设置的路径映射配置。
• initialRouteName：设置栈管理方式的默认页面，且此默认页面必须是路由配置中的某一个。
• initialRouteParams：初始路由参数。
• defaultNavigationOptions：用于配置导航栏的默认导航选项。
• mode：定义渲染和页面跳转的样式，选项有 card 和 modal，默认为 card。
• headerMode：定义返回上级页面时动画效果，选项有 float、screen 和 none。

最后，在入口文件中以组件的方式引入 StackNavigatorPage.js 文件即可。例如：

import StackNavigatorPage from './src/StackNavigatorPage'

export default class App extends Component<Props> {render() {
    return (<StackNavigatorPage/>);
  }
}

要实现页面的栈管理功能或跳转功能，还需要再至少新建两个子页面，例如 MainPage.js 和 DetailPage.js。

export default class MainPage extends PureComponent {

    static navigationOptions = {header: null,        // 默认页面去掉导航栏};

    render() {const {navigate} = this.props.navigation;
        return (
            <View>
                <TouchableOpacity onPress={() => {navigate('DetailPage')}}>
                    <Text style={styles.textStyle}> 跳转详情页 </Text>
                </TouchableOpacity>
            </View>
        );
    }
}

export default class DetailPage extends PureComponent {

    static navigationOptions = {title: '详情页',};

    render() {
        let url = 'http://www.baidu.com';
        return (
            <View>
                <WebView
                    style={{width:'100%',height:'100%'}}
                    source={{uri: url}}/>
            </View>
        );
    }
}

除了示例中使用到的 navigationOptions 属性，StackNavigator 导航器支持的 navigationOptions 属性还包括：

• header：设置导航属性，如果设置为 null 则隐藏顶部导航栏。
• headerTitle：设置导航栏标题。
• headerBackImage：设置后退按钮的自定义图片。
• headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。
• headerTruncatedBackTitle：设置上个页面标题不符合返回箭头后面的文字时显示的文字。
• headerRight：设置导航栏右侧展示的 React 组件。
• headerLeft：设置标题栏左侧展示的 React 组件。
• headerStyle：设置导航条的样式，如背景色、宽高等。
• headerTitleStyle：设置导航栏的文字样式。
• headerBackTitleStyle：设置导航栏上【返回】文字的样式。
• headerLeftContainerStyle：自定义导航栏左侧组件容器的样式，例如增加 padding 值。
• headerRightContainerStyle：自定义导航栏右侧组件容器的样式，例如增加 padding 值。
• headerTitleContainerStyle：自定义 导航栏标题组件容器的样式，例如增加 padding 值。
• headerTintColor：设置导航栏的颜色。
• headerPressColorAndroid：设置导航栏被按下时的颜色纹理，Android 需要版本大于 5.0。
• headerTransparent：设置标题背景是否透明。
• gesturesEnabled：设置是否可以使用手势关闭当前页面，iOS 默认开启，Android 默认关闭。

除了可以实现路由管理和页面跳转操作外，还可以使用 react-navigation 实现顶部和底部的 Tab 切换，如图 7 -13 所示。

如果要实现底部选项卡切换功能，可以直接使用 react-navigation 提供的 createBottomTabNavigator 接口，并且此导航器需要使用 createAppContainer 函数包裹后才能作为 React 组件被正常调用。例如：

import React, {PureComponent} from 'react';
import {StyleSheet, Image} from 'react-native';
import {createAppContainer, createBottomTabNavigator} from 'react-navigation'

import Home from './tab/HomePage'   
import Mine from './tab/MinePage'

const BottomTabNavigator = createBottomTabNavigator(
    {
        Home: {
            screen: Home,
            navigationOptions: () => ({
                tabBarLabel: '首页',
                tabBarIcon:({focused})=>{if(focused){
                        return(<Image/>   // 选中的图片)
                    }else{
                        return(<Image/>   // 默认图片)
                    }
                }
            }),
        },
        Mine: {
            screen: Mine,
            navigationOptions: () => ({
                tabBarLabel: '我的',
                tabBarIcon:({focused})=>{…}
            })
        }
    }, {  // 默认参数设置
        initialRouteName: 'Home',
        tabBarPosition: 'bottom',
        showIcon: true,
        showLabel: true,
        pressOpacity: 0.8,
        tabBarOptions: {
            activeTintColor: 'green',
            style: {backgroundColor: '#fff',},
        }
    }
);

const AppContainer = createAppContainer(BottomTabNavigator);

export default class TabBottomNavigatorPage extends PureComponent {render() {
        return (<AppContainer/>);
    }
}

当然，除了支持创建底部选项卡之外，react-navigation 还支持创建顶部选项卡，此时只需要使用 react-navigation 提供的 createMaterialTopTabNavigator 即可。如果要使用实现抽屉式菜单功能，还可以使用 react-navigation 提供的 createDrawerNavigator。

附：
react-navigation 官网