React Navigation V4(4.x) 安装

React Navigation 4.0 的依赖有所变动，新的依赖有

react-native-screens 、react-native-gesture-handler、 react-native-reanimated

相比3.x， 多了一个 react-native-reanimated，在 3.x 使用的是 rn 自带的 animated，4.x 改为了 reanimated，官方意思是说用这个，更底层，可以让页面切换过渡更加平滑流畅，另外两个倒是没变，作用也一样

写本文时间（2019年09月23日）4.x 还不是很稳定，有些是自身的，有些是依赖的。

比如 react-native-reanimated 看 issue 和 pull requests 还在疯狂更新，虽然不稳，但社区活跃，值得一试。

还有 react-native-screens，到现在都还一直是 alpha 版本，并且 4.x 在此时还有一个致命的 issue，官方文档还建议使用 1.0 的 alpha，这个可真是不放心啊，只能自己跳坑去试了

【更新】：经测试，还是遵循官方文档，使用1.0，2.0版本确实有bug，看了看 react-native-screens 的源码，好像是2.0加了不少新功能，但 react-navigation 貌似没用到这些新功能，所以这里安装1.0版本。

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

然后再

yarn add react-navigation

官方文档 react-navigation-4.0.html 告知新版本做了分离，StackNavigator、TabNavigator、DrawerNavigator 可按需安装，这个是本次版本最重要的升级，做了这个，能把核心稳定下来，以后只需维护分离出来的各种 Navigator 即可。并且有了这个分离，社区中可以自己做更多 Navigator ，毕竟只靠官方那三个 Navigator 并不能满足所有人的需求。

DrawerNavigator 这个是属于 android ui 设计规范中的提倡的，这个设计初衷是好的，但客观上很容易造成了 iOS、Android 下的 UI、操作体验有严重不一致，大部分 app(至少国内的) 都没怎么使用这个规范，微信曾经用过一次，但在极短的时间内就回滚了，这说明这个设计对于用户是有一定的学习成本的，所以就不用他了，那么仅安装另外两个即可

yarn add react-navigation-stack react-navigation-tabs

rn 6.0 是 autolink，安装完成后只需对于 iOS 来个自动依赖

cd ios && pod install && cd ..

安装完成后，需修改 android/app/.../MainActivity.java，对于 3.0，可参见 这篇文章 ，需要配合 react-native-screens 和 react-native-gesture-handler，现在 react-native-screens 升级到 2.0 则不再需要了，所以仅需修改如下代码

...
// for react-native-gesture-handler
import com.facebook.react.ReactRootView;
import com.facebook.react.ReactActivityDelegate;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

   ...

    // for react-native-gesture-handler
    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Override
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }
        };
    }

   ...
}

根据这个 issue 和官方文档，还需要在 android/app/build.gradle 添加如下代码，但看 issue 中的回复，这好像是个临时解决方案，所以后续要跟进版本，看最终要如何解决

...
dependencies {
    ...

    // for react-native-screens
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha03'

    ....
}
...

最后，在项目入口文件启用 Screens，启用这个可让 app 运行时的内存占用有明显改善

(备注：react-native-screens 2.0 版本 useScreens 改名为 enableScreens）

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

在 iOS 上 react-native-gesture-handler 可能会有问题，可尝试在项目入口文件添加

import 'react-native-gesture-handler'