React-Navigation各版本安装步骤对比

1.x和2.x版本

1
2
3

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命令添加依赖

1 2	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。

1
2
3

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端，需要执行如下命令

1
2
3

cd ios
pod install
cd ..

Android端对于新添加的库：react-native-screens，还需要如下配置，进行项目根目录android/app/build.gradle文件中,添加如下依赖：

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

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

1
2
3

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

使用androidx配置支持jetifier:

1
2
3

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

在项目的package.json文字文件添加脚本：

1
2
3

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

之后，运行刚添加的postinstall

1
2
3

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);
+      }
+    };
+  }
}