React Navigation V3(3.x) 安装

一、安装

写本文时，React Navigation 最新版即为 3.x， 所以直接安装即可
yarn add react-navigation

若版本更新，可手工指定版本号安装
yarn add [email protected]

二、安装依赖

一般情况下安装 react-navigation 的时候已自动安装依赖，若未安装，手动进行安装

yarn add react-native-gesture-handler
yarn add react-native-screens

这两个依赖，其中第一个是必须的，react-navigation 的手势控制依赖于他，第二个是非必须的，下面再作说明

三、配置 react-native-gesture-handler

执行
react-native link react-native-gesture-handler

该步骤会连接 react-native-gesture-handler 的原生模块，从而做到手势控制使用 UI 线程处理，而不使用 JS 线程，使得应用的手势控制更加丝滑

四、配置 react-native-screens

执行
react-native link react-native-screens

react-native-screens 可以让每个页面使用原生的 screen 组件展示，这需要进行一些配置，如果没有配置，仍然可用，会自动降级为 RN View 模拟的 screen 组件

五、针对 Android 工程的修改

（iOS 无需进行该步骤）
修改的文件在工程目录下 android/app/.../MainActivity.java

1. react-native-gesture-handler 所需的修改

package com.reactnavigation.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactRootView;
+ import com.facebook.react.ReactActivityDelegate;
+ 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);
+      }
+    };
+  }
}

2. react-native-screens 所需的修改

package com.reactnavigation.example;

-import com.facebook.react.ReactActivity;
+import android.os.Bundle;
+import com.facebook.react.ReactFragmentActivity;

-public class MainActivity extends ReactActivity {
+public class MainActivity extends ReactFragmentActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(null);
+    }

}

3. 所以 MainActivity.java 的最终代码为

package com.reactnavigation.example;

import android.os.Bundle;
import com.facebook.react.ReactRootView;
import com.facebook.react.ReactFragmentActivity;
import com.facebook.react.ReactActivityDelegate;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactFragmentActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "Example";
    }


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(null);
    }

    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
       return new ReactActivityDelegate(this, getMainComponentName()) {
         @Override
         protected ReactRootView createRootView() {
            return new RNGestureHandlerEnabledRootView(MainActivity.this);
         }
       };
    }
}

六、生效 react-native-screens

即使进行完以上步骤， react-native-screens 仍然是使用 View 进行模拟的组件，若让其生效，需要在工程入口文件中添加

import {useScreens} from 'react-native-screens';
useScreens();

至此，安装完毕，可以愉快使用 React Navigation 了