react-navigation安装适配指南

react-navigation从发布以来经历了1x，2x，3x，4x的重要变更，现在已经到了5x的阶段，5x相比4x支持了JSX的写法，但由于5x新发布不久，bug会比4x多一些；还有就是5x生态没有4x健全，用的公司也不是很多，遇到问题在网上能够找到的资料没有4x全，因此建议大家在4x上进行学习，然后待5x稳定了以及生态健全了之后，在通过本课程提供的4x到5x的迁移教程进行迁移。

因为react-navigation对RN版本有要求，请确保你的RN版本是0.6x版本。

热门问答

1. 先学习4x还是直接上手5x？
答：因为4x的生态以及稳定性要比5x好很多，另外，5x的思想和4x是一致的主要是写法上有所不同，4x更容易上手，并且4x还在不停的更新，现在学习的话建议从4x学起，等掌握了4x之后在按照课程提供的相关教程进行5x的学习。课程为大家准备了5x安装使用教程以及4x到5x的迁移适配教程，建议掌握了4x之后在进行5x的学习。
2. 5x相比4x有哪些优缺点？
答：5x相比4x最大的优点是在使用的写法上支持了JSX的写法，但相比比较成熟的4x缺点还比是较明显的，主要体现在4x所支持的一些API或功能在5x还没有完全支持；另外因为5x新发布不久，bug会比4x多一些；还有就是5x生态没有4x健全，用的公司也不是很多，遇到问题在网上能够找到的资料没有4x全。
3. 4x到5x迁移的迁移成本大吗？
答：因为5x相比4x主要是在使用上写法变了，大部分API和4x都是一致的，从现在迁移的经验上来看总体迁移成本并不大。
4. 4x还在更新吗，可以不迁移到5x吗？
答：从React Navigation的官库上看，目前官方还一直在不停的更新4x的版本，因为目前业界大部分公司用的版本还主要集中在4x、3x上，所以除非有特殊要求需要使用5x，否则可以继续使用4x的版本。

react-navigation安装适配指南
———————-
第一步： 安装主库

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

第二步： 安装主库依赖的三方库
因为新版react-navigation依赖一些第三方库，所以安装时需要同时引入：

yarn add react-native-gesture-handler
yarn add react-native-reanimated
yarn add react-native-safe-area-context
yarn add @react-native-community/masked-view
yarn add react-native-screens
# or with npm
# npm install react-native-gesture-handler //提供了包括缩放、旋转、屏蔽滑动等手势的处理系统
# npm install react-native-reanimated //动画？
# npm install react-native-safe-area-context //适配当前的全面屏手机的安全区域
# npm install @react-native-community/masked-view
# npm install react-native-screens

第三步： 根据需要引入各导航组件的库

yarn add react-navigation-stack
yarn add react-navigation-drawer
yarn add react-navigation-tabs
# or with npm
# npm install react-navigation-stack
# npm install react-navigation-drawer
# npm install react-navigation-tabs

第四步：执行pod install
为了在iOS上完成安装，还需要执行一些命令：

cd ios
pod install
cd ..

第五步：为react-native-screens添加相关依赖
为了在Android上完成安装，还需要在android/app/build.gradle中为react-native-screens添加相关依赖：

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

第六步：配置react-native-gesture-handler
为了在Android上能够使react-native-gesture-handler有效，需要修改MainActivity.java：

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 or App.js中导入react-native-gesture-handler

import 'react-native-gesture-handler';

---