react-native navigation安装适配

win10系统vscode 安装 react-navigation。从网上看了好多,大部分都说的不全,或者是苹果系统,搞了好多天终于找到完整的操作。
任何一个依赖没安装,都会安装app失败,报错如图。出现类似报错尽量不要百度,给的答案都太老,没一个有用的。据说ios 不用这么麻烦,但是没苹果本,只能受这个罪

The development server returned response error code:500
解决方案:重新安装依赖,重新配置。

微信图片_20201218131627.jpg

  1. 安装主库
    yarn add react-navigation

  2. 安装主库依赖的第三方库
    yarn add react-native-gesture-handler
    yarn add react-native-reanimated
    yarn add react-native-safe-area-context
    yarn add @react-native-community/masked-view
    yarn add react-native-screens
  3. 引入导航组件的库
    
    yarn add react-navigation-stack
    yarn add react-navigation-drawer
    yarn add react-navigation-tabs
  4. 为 react-native-screens 添加依赖
    用vscode 打开项目,在 android/app/build.gradle 文件中搜 implemetation (ctil+f),因为这个代码较多,在下面部分,直接搜。添加如下:
    
    implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
    implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
  5. 配置 react-native-gesture-handle
    路径:android>app>src>main>java>MainActivity.java
    
    修改1:头部导入
    import com.facebook.react.ReactActivityDelegate;
    import com.facebook.react.ReactRootView;
    import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
    
    修改2:Mainactive底部增加(不是替换,是增加一个新的):
       @Override
      protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
          @Override
          protected ReactRootView createRootView() {
           return new RNGestureHandlerEnabledRootView(MainActivity.this);
          }
        };
    }
  6. 在 index.js 中 导入 react-native-gesture-handler
    
    import "react-native-gesture-handler"

  7. 如果需要安装icon的话
    安装icon :yarn add react-native-vector-icons
    
    在目录文件 android/app/src/build.gradle  
    添加apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
    
    参考:
    https://github.com/oblador/react-native-vector-icons
    https://oblador.github.io/react-native-vector-icons/

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注