React-Navigation導航各版本安裝步驟對比及注意事項

1.x和2.x版本

yarn add react-navigation
# or with npm
# npm install --save react-navigation

3.x版本

yarn add react-navigation
# or with npm
# npm install react-navigation
yarn add react-native-gesture-handler react-native-reanimated
# or with npm
# npm install react-native-gesture-handler react-native-reanimated

1.如果你的ReactNative版本是0.59及以下，還需要手動通過link命令添加依賴

react-native link react-native-reanimated
react-native link react-native-gesture-handler

link後IOS的設置就完成了，但在Android端還需要一些配置。
對於react-native-gesture-handler這個庫還需要做如下配置：
在項目根目錄Android中MainActivity.java文件中，添加如下配置：

package com.reactnavigation.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";
  }
// 重寫createReactActivityDelegate方法
+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

2.如果你項目的ReactNative版本是0.60及以上，就不用手動執行link命令添加依賴了，ios端需要執行如下命令完成link依賴, 注意需要安裝Cocoapods。

cd ios
pod install
cd ..

4.x版本

yarn add react-navigation
# or with npm
# npm install react-navigation

yarn add react-native-reanimated react-native-gesture-handler react-native-screens@^1.0.0-alpha.23

ReactNative 0.60以及更高,不需要手動執行link命令，對於ios端，需要執行如下命令

cd ios
pod install
cd ..

Android端對於新添加的庫：react-native-screens， 還需要如下配置，進行項目根目錄android/app/build.gradle文件中,添加如下依賴：

implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

如果你的ReactNative版本是0.59及一下，則需要如下配置：

react-native link react-native-reanimated
react-native link react-native-gesture-handler
react-native link react-native-screens

使用androidx配置支持jetifier:

yarn add --dev jetifier
# or with npm
# npm install --save-dev jetifier

在項目的package.json文字文件添加腳本：

"scripts": {
  "postinstall": "jetifier -r"
}

之後，運行剛添加的postinstall

yarn postinstall
# or with npm
# npm run postinstall

對於Android來說， react-native-gesture-handler這個庫還需要進一步配置，和3.x版本中一致，在MainActivity.java文件中導包，並重寫響應方法：

package com.reactnavigation.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 或者 App.js文件中，導入下面內容

import 'react-native-gesture-handler'

注意

4.x版本中創建頁面導航路由的組件createStackNavigator從react-navigation庫中移除，需要從react-navigation-stack庫中獲取
使用yarn add react-navigation-stack安裝依賴，然後進行導入使用。
import { createStackNavigator } from ‘react-navigation-stack’;

現在運行

react-native run-ios 或者 react-native run-android 編譯並運行項目就可以了

最後
ReactNative開發者們，你們現在使用React-Navigation版本是多少？歡迎在文章底部留言參加討論。

個人網站：https://wayne214.github.io
歡迎關注個人微信公衆號：君偉說。