美文网首页
react-navigation 4x 导入项目

react-navigation 4x 导入项目

作者: andrewliu20 | 来源:发表于2020-01-03 12:55 被阅读0次

    第一步: 安装主库
    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

    相关文章

      网友评论

          本文标题:react-navigation 4x 导入项目

          本文链接:https://www.haomeiwen.com/subject/pgszoctx.html