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'
网友评论