使用reactnavigation5.x（RN0.6以上版本）

1.安装

#安装核心库
npm install @react-navigation/native
or
yarn add @react-navigation/native

#依赖库
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
or
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

2.原生部分配置

2.1. IOS

cd ios
pod install

2.2. Android

修改 android/app/build.gradle 

dependencies {
    ...
    implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
    implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
    ...
}

配置react-native-gesture-handler，修改 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);
+      }
+    };
+  }
}

 

3.JS部分配置

修改 index.js 添加（如果跳过这一步可能会导致线上环境闪退）

#官方文档说必须加在第一行，你们看着办
import 'react-native-gesture-handler';

4.编译运行

分别执行react-native run-android 和 react-native run-ios，如果编译打包通过，说明配置成功。

要使用某个导航器，还需要安装并引入对应导航器的依赖

本人测试时依赖的版本：

"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/native": "^5.7.1",
"@react-navigation/stack": "^5.7.1",
"babel-plugin-module-resolver": "^4.0.0",
"react": "16.13.1",
"react-native": "0.63.0",
"react-native-config": "^1.3.1",
"react-native-gesture-handler": "^1.6.1",
"react-native-reanimated": "^1.9.0",
"react-native-safe-area-context": "^3.1.1",
"react-native-screens": "^2.9.0"