关于react-navigation 3.x的使用

1、安装

以前当我们在使用react-navigation的时候，我们只需要使用下面一条命令安装一下react-navigation就可以使用了。

yarn add react-navigation
# 或者使用 npm
# npm install --save react-navigation

但是3.x以后的不仅仅只有这一条命令了，因为在新版本中，新增了一个原生库react-native-gesture-handler，所以，不管是升级还是新安装，都需要安装这个库

yarn add react-native-gesture-handler
# 或者使用 npm
# npm install --save react-native-gesture-handler

然后链接所有本地依赖项:

react-native link

2、使用

在安装3.x后，需要将最外层的包裹形式修改为createAppContainer

在之前的版本中，使用createStackNavigator后，就会自动实现createAppContainer，但在新版本中，需要手动使用createAppContainer来包裹最外层的路由。

import {createStackNavigator,createAppContainer} from 'react-navigation';
import HomePage from './js/HomePage';
import Page1 from './js/Page1';
import Page2 from './js/Page2';

 const AppStackNavigator = createStackNavigator({
    HomePage: {
        screen: HomePage
    },
    Page1: {
        screen: Page1
    },
    Page2: {
        screen: Page2
    }
});

 export default createAppContainer(AppStackNavigator);

路由配置简写

假设我们对HomePage唯一的路由配置是页面组件，我们不需要使用{screen：HomePage}配置格式，我们可以直接使用页面组件。

 const AppStackNavigator = createStackNavigator({
    HomePage: HomePage,
    Page1:Page1,
    Page2:Page2
});

3、RN混合中使用报错

以上使用在纯RN中是可以的，但是当我在混合中使用就会报下面错，至今还没解决，如有解决方案，请指点

更新

RN混合中使用报错的问题已经解决了，请看另一篇博客
https://www.jianshu.com/p/066f95cde865

参考

React Navigation 3.x

react-navigation使用技巧（再进阶）