此文档基本上是官网的配置,但也结合了我自己的一些经验
前置 node 至少18版本
1、下载Android Studio (此版本基本上都是所有的插件,只需下一步) 和 jdk
Studio: developer.android.google.cn/studio?hl=z…
jdk :www.oracle.com/java/techno…
2. 配置 ANDROID_HOME 环境变量 (电脑本身的环境变量)
React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径,从而正常进行编译。
打开 控制面板-> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录(具体的路径可能和下图不一致,请自行确认):
SDK 默认是安装在下面的目录:
C:\Users\你的用户名\AppData\Local\Android\Sdk
你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径,具体是Appearance & Behavior → System Settings → Android SDK。
你需要关闭现有的命令符提示窗口然后重新打开,这样新的环境变量才能生效。
3. 把一些工具目录添加到环境变量 Path(系统变量中的path)
打开 控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量,选中Path变量,然后点击编辑。点击新建然后把这些工具目录路径添加进去:platform-tools、emulator、tools、tools/bin
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin
创建新项目
如果你之前全局安装过旧的 react-native-cli 命令行工具,请使用npm uninstall -g react-native-cli 卸载掉它以避免一些冲突
npm uninstall -g react-native-cli @react-native-community/cli
使用 npx react-native@latest init AwesomeProject 创建项目(注意官网这里没特别说明:如果有yarn的话 执行此命令会默认使用yarn,而不是npm有可能导致报错)
此时就需要 npx react-native@latest init AwesomeProject --npm
编译并运行 React Native 应用
cd AwesomeProject
yarn android 或者 yarn react-native run-android
此命令会对项目的原生部分进行编译,同时在另外一个命令行中启动Metro服务对 js 代码进行实时打包处理(类似 webpack)。Metro服务也可以使用yarn start命令单独启动。
如果配置没有问题,你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖,耗时可能数十分钟。此过程严重依赖稳定的代理软件,否则将频繁遭遇链接超时和断开,导致无法运行。
这里唯一要做的就是等待(要很久,我基本断断续续装了3个小时)
如果启动失败 运行 npx react-native doctor 检查一下是否有依赖安装失败
在设备上运行
1. 开启 USB 调试
在默认情况下 Android 设备只能从应用市场来安装应用。你需要开启 USB 调试才能自由安装开发版本的 APP。
首先,确定你已经打开设备的 USB 调试开关。
2. 通过 USB 数据线连接设备
现在我们设置一个 Android 设备来运行我们的 React Native 项目,通过 USB 将你的设备插入开发机器以继续。
下面检查你的设备是否能正确连接到 ADB(Android Debug Bridge),使用adb devices命令:(如果没有出现设备,就是调试模式没有打开,请自行检查对应机型打开)
adb devices List of devices attached emulator-5554 offline # Google emulator 14ed2fcc device # Physical device
在右边那列看到device说明你的设备已经被正确连接了。注意,你每次只应当连接一个设备。
译注:如果你连接了多个设备(包含模拟器在内),后续的一些操作可能会失败。拔掉不需要的设备,或者关掉模拟器,确保 adb devices 的输出只有一个是连接状态。
3. 运行应用
现在你可以运行下面的命令来在设备上安装并启动应用了。
$ npx react-native run-android