一文通透react-native从安装到运行问题解决方案

890 阅读3分钟

1 安装遇到的问题

1.1 Android studio 版本安装问题

最近要对一个老项目开发,使用最新的版本(Flamingo)进行启动,是各种不服气,一顿报错。无奈,只能降低版本。于是将 java 降低到 java8 ,Android studio 降到11版本。

Android studio 历史版本,点击进入下载页面developer.android.google.cn/studio/arch…

1.2 Android SDK 安装很慢问题

由于大家都知道的原因,Android studio下载后,若是在studio 中下载 Android SDK 会十分的慢。有网友提供一些代理服务的解决方案,但是很繁琐,我这里试了前面几个方案效果不好后就放弃了。前前后后为了下载不同版本的SDK花费了很多时间,好在功夫不负有心人,找到一个好用的工具网站,下载很快,点击进入:https://www.androiddevtools.cn/

下载SDK tool,在里面进行下载安装,非常快

image.png

2 配置相关问题

2.1 react-native 存在手动link的库

出现这种情况,先将报错的包用 unlink 命令断开。然后再手动link上。

不过我这里还是不行,有大佬分享,在 react-native.config.js 中进行如下配置,可以绕开link检测。

module.exports = {
  dependencies: {
    '@react-native-community/async-storage': {
      platforms: {
        android: null // disable Android platform, other platforms will still autolink
      }
    },
    'react-native-exit-app': {
      platforms: {
        android: null // disable Android platform, other platforms will still autolink
      }
    },
    'react-native-webview': {
      platforms: {
        android: null // disable Android platform, other platforms will still autolink
      }
    }
  }
}

有几个就添加几个,若 iOS 平台也需要,添加 ios: null 即可。

2.2 java版本未指定

报错信息:om.android.tools.r8.a: Invoke-customs are only supported starting with Android O (--min-api 26) 。

解决方案,指定编译版本为 java8,在 android/app/build.gradle 中,添加如下配置:

android {
    defaultConfig {
        // 需要添加的配置
        compileOptions {
            sourceCompatibility JavaVersion.VERSION_1_8
            targetCompatibility JavaVersion.VERSION_1_8
        }
    }
}

2.3 模拟器尺寸和系统位数不对

报错信息:'app:debug': Could not find build of variant which supports density 420 and an ABI in x86。

仔细查看信息和网上资料,发现当前启动的模拟器型号是 x64 架构,分辨率是 420dpi 的。

        ndk {
            abiFilters "armeabi-v7a", "x86"
        }

于是,重新下载新的虚拟设备。

image.png

【特别提醒】下载当前android studio 匹配的 API 版本。我这里需要 API29 版本。

2.4 react-native 版本未指定的报错

报错信息:Failed to transform react-native-0.71.0-rc.0-debug.aar。

这个问题,GitHub issue 中有提到:github.com/facebook/re…

需要将项目都用当前项目中指定的 react-native 版本编译,避免不一致导致错误,。

// android/build.gradle
allprojects {
    configurations.all {
        resolutionStrategy {
            force "com.facebook.react:react-native:0.61.5" // 后面是package.json 中指定的版本
        }
    }
}

2.5 :appcompat:1.4.0-beta01构建失败

app兼容性问题,强制使用 android core 1.6 版本。参见:cloud.tencent.com/developer/a…

解决方案:

// android/app/build.gradle
android {
    defaultConfig {
        configurations.all { 
            resolutionStrategy { force 'androidx.core:core-ktx:1.6.0' }
        }
    }
}

3 调试 react-native

工欲善其事,必先利其器。好用的调试工具必不可少,推荐 reac-native-debugger。

3.1 debugger 工具一直连接不上

出现这个的问题,一度怀疑是端口不对。但是 react-native-debugger 明明显示监听 8081 端口。查看控制台报错,大概意思是:有另外一个devtool已经在监听了。

可是我这里只有一个窗口监听。后来发现,原来Chrome 浏览器安装了 react-devtools ,这个界面开着(下图),导致被占用了,关闭后,然后重新连接即可。

image.png

3.2 debugger 工具依赖的 electron 下载失败

很不幸,中国开发者就是很受累,需要配置可用镜像,否则下载经常超时断开。这里使用淘宝镜像。

首先,在cmd中打开npm配置文件 npm config edit,然后增加下面镜像配置(最新)。

electron_mirror=https://registry.npmmirror.com/binary.html?path=electron/

然后重新安装,安装前确定本地 node_modules 中 electron 是空的或不存在。

4 发布打包问题

4.1 keytool - java.io.FileNotFoundException: cacerts 拒绝访问

该问题发生在打包发布前,生成秘钥阶段。如执行下面命令:

keytool -genkey -alias MyApp.keystore -keyalg RSA -validity 10000 -keystore MyApp.keystore

命令含义可自行搜索到(Go),将生成 MyApp.keystore 到当前目录。 解决方案,就是将cmd使用管理员模式。