React-Navigation 5.X
相比较于之前版本,5.x 实现了全部组件化的开发,将原来的包拆分成了许多的组件进行使用,使用方式也发生了很大的变化。
安装
通过 yarn 来安装
yarn add @react-navigation/native
还需要安装 react-navigation 需要的一些包
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
react-native-reanimated
是动画库性能很好,使用组件来实现的。react-native-gesture-handler
跨平台的手势库。react-native-screens
实现了 Android 和 ios 的 screen 原生组件。react-native-safe-area-context
适配异性屏幕。@react-native-community/masked-view
堆栈式导航器所依赖的库。
额外操作
React Native 0.60 版本以后, 会自动 link。
因此你不需要执行react-native link
。
iOS
mac 需要执行一下
cd iod
pod install
cd ..
Android
来到手势库官网
https://docs.swmansion.com/re…
这个目录下的文件 android\app\src\main\java\com\MainActivity.java
添加 +
后面的内容
package com.swmansion.gesturehandler.react.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);
+ }
+ };
+ }
}
在 index.js 引入
import 'react-native-gesture-handler';
如果忘记了添加这个,开发环境可能不会报错,但是在生产环境会报错。
最后
如果没有生效,就重新安装一下 APP