React-Navigation 5.X的配置

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 iod
pod install
cd ..

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