React-Navigation 5.X

相比较于之前版本，5.x实现了全部组件化的开发，将原来的包拆分成了许多的组件进行使用，使用方式也发生了很大的变化。

安装

通过yarn来安装

yarn add @react-navigation/native

还需要安装react-navigation需要的一些包

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

react-native-reanimated 是动画库性能很好，使用组件来实现的。
react-native-gesture-handler 跨平台的手势库。
react-native-screens 实现了Android和ios的screen原生组件。
react-native-safe-area-context 适配异性屏幕。
@react-native-community/masked-view 堆栈式导航器所依赖的库。

额外操作

React Native 0.60 版本以后, 会自动link。
因此你不需要执行react-native link。

iOS

mac需要执行一下

cd iodpod installcd ..
Android

来到手势库官网
https://docs.swmansion.com/re...
这个目录下的文件
android\app\src\main\java\com\MainActivity.java
添加+后面的内容

package com.swmansion.gesturehandler.react.example;import com.facebook.react.ReactActivity;+ import com.facebook.react.ReactActivityDelegate;+ import com.facebook.react.ReactRootView;+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;public class MainActivity extends ReactActivity {  @Override  protected String getMainComponentName() {    return "Example";  }+  @Override+  protected ReactActivityDelegate createReactActivityDelegate() {+    return new ReactActivityDelegate(this, getMainComponentName()) {+      @Override+      protected ReactRootView createRootView() {+       return new RNGestureHandlerEnabledRootView(MainActivity.this);+      }+    };+  }}

在index.js引入

import 'react-native-gesture-handler';

如果忘记了添加这个，开发环境可能不会报错，但是在生产环境会报错。

最后

如果没有生效，就重新安装一下APP