react-navigation 4x 导入项目

2020-01-03  本文已影响0人  andrewliu20

第一步: 安装主库
npm install react-navigation
第二步: 安装主库依赖的三方库
npm install react-native-gesture-handler
npm install react-native-reanimated
第三步: 根据需要引入各导航组件的库
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-gesture-handler
为了在Android上能够使react-native-gesture-handler有效,需要修改MainActivity.java:

package com.reactnavigation.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);
+      }
+    };
+  }
}

PS:错误以及解决方案

Getting this error: error: bundling failed: Error: Unable to resolve module react-native-safe-area-context

解决方案:

npm i react-native-safe-area-view react-native-safe-area-context &&
react-native link react-native-safe-area-context

It prompted me an error about masked-view, so I also had to run

npm i @react-native-community/masked-view

最后 pod install

上一篇下一篇

猜你喜欢

热点阅读