React-Navigation 5.X的配置

coderpcy

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

阅读 850
14 声望
0 粉丝
0 条评论
你知道吗?

14 声望
0 粉丝
宣传栏