尽管官网(React 基础 · React Native 中文网)已经介绍得比较详细,然而实际操作上还是有一些坑需要解决。
0. Windows的设置
在一切正式开始之前,Windows系统本身也可能会有一些小坑,在这里可以首先统一解决。
0.1 .gradle默认路径
.gradle默认路径会在C:/Users//.gradle路径中。如果C盘存储不足,可能会在后续遇到问题。因此我将其复制到了X盘中的X:/Users//.gradle路径中(如果一开始没有.gradle,可以手动创建);然后在环境变量中增加GRADLE_USER_HOME,值为上述路径即可。
0.2 环境变量path在不同shell中不同的问题
我遇到的一个问题是,powershell的$env:Path,cmd的%PATH%,以及系统本身环境变量中的path三者都不相同。导致的问题是,有的时候不小心使用powershell执行命令时,使用的java版本不是我想要的、系统环境变量path首次出现的java版本。
cmd环境变量不同的原因是,在注册表的HKEY_CURRENT_USER\Software\Microsoft\Command Processor\AutoRun 或者 HKEY_LOCAL_MACHINE\Software\Microsoft\Command Processor\AutoRun 中补充了相应的内容。
powershell的环境变量不同的原因仍未查明。解决方法是:在powershell每次启动都会运行的 Microsoft.PowerShell_profile.ps1 文件中增加此语句:$env:Path = [System.Environment]::GetEnvironmentVariable("Path", [System.EnvironmentVariableTarget]::Machine)
接下来的步骤基本按照react-native的官方教程执行即可。其余可能遇到的问题见下文。
1. 设备问题
我想在自己的设备而不是模拟器上运行。使用adb devices能看到有一个device和一个emulator,这会导致后续出现问题。因此要把emulator给去掉。假设出现的是emulator-5554,将其编号加1,关注使用5555端口的进程:netstat -ano | findstr 5555
然后使用 taskkill -pid xxxx(替换为上一步出现的pid) -f 强制杀死进程即可 (这一步最好使用管理员身份打开shell,以免权限不足的问题。)
华为手机可能会遇到adb devices找不到的问题。不过这个问题在我安装了自带的华为手机助手HiSuite(然后卸载)后消失了。
2. 网络问题
如果按照教程,成功使用 npx @react-native-community cli init AwesomeProject初始化后,在执行下一步 npx react-native run-android 时,可能会遇到网络上的问题(通过报错信息来判断)。
首先可能是代理的问题。这个可以通过 npx react-native run-android --info 来进一步确认。如果确认代理有问题,那么进入第0.1节中的%GRADLE_USER_HOME%路径(如果没手动设置的话,那就是C盘那个默认路径),打开gradle.properties,删除或修改添加的代理。
还有可能是网络超时或连接不稳定的问题。进入初始化的文件夹(如教程中的AwesomeProject),沿着android > gradle > wrapper 找到 gradle-wrapper.properties,将其中的下载地址改为国内镜像源。例如腾讯的 mirrors.cloud.tencent.com/gradle/<gradle版本>
解决了这两个问题之后(注意这两个要修改的gradle文件位置是不一样的,太坑了……),可能仍然无法安装成功。如果报错信息大致是缺少plugin/plugin无法移动之类的问题,则修改当前项目文件夹中的build.gradle文件,在repositories中增加一些仓库即可。如: gradlePluginPortal() maven { url "mirrors.aliyun.com/maven/" } // 阿里云镜像仓库 maven { url "mirrors.cloud.tencent.com/nexus/repos…" } // 腾讯云镜像仓库
本节的各个步骤中如果出现异常,建议不要使用npx react-native run-android命令,而是找到gradle所在路径,使用 .\gradle.bat --info 命令,这样可以看到更加详细的报错信息,便于问题排查。