使用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"