搭建安卓环境开发 RN 项目

先下载 android studio

本机版本：node 18.19.1，npm 10.2.4

如果要清除缓存：

cd android && ./gradlew clean

运行：

yarn react-native run-android

1.创建项目

npx react-native init AwesomeProject
等价于react-native@latest

注意：创建项目的时候一定要指定 rn 的版本，否则我们的 jdk 版本不适用！

npx react-native init AwesomeProject --version 0.70.15（java11 及以上即可）

npx react-native@0.72.12 init GoodHaulFront --version 0.72.12

npx react-native@0.70.15 init GoodHaulFrontDriver --version 0.70.15

注意：有时候下载新包之后 rn 识别不到，需要重新运行项目，项目运行最好是在 android studio 里面进行的！！！

这样创建的 app 是 js 文件，我们可以集成 typescript

集成 ts 的方法：

由于 React Native Packager 是通过 Babel 编译.js 文件以及打包的，所以没办法直接使用.tsx。折中本思路就是，先用 TypeScript 的编译器 tsc 将.ts 或.tsx 文件编译成.js 文件，再用 React Native Packager 编译打包即可。

首先我们安装 TS 依赖：

yarn add -D typescript

然后需要安装 types：

yarn add -D @types/react @types/react-native

然后需要配置 tsconfig.json，可以用如下命令生成：

tsc --init --pretty --sourceMap --target es2015 --outDir ./lib --rootDir ./ --module commonjs --jsx react

生成的文件里面有具体每个参数的含义，也可以参考TS 官网文档。

接下来就是利用 ts 编译器编译写好的.tsx 个人建议在 package.json 中配置一下

...
"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "tsx":"./node_modules/.bin/tsc",
    "test": "jest"
  },
...

2.运行

此命令会对项目的原生部分进行编译，同时在另外一个命令行中启动Metro服务对 js 代码进行实时打包处理（类似 webpack）。Metro服务也可以使用yarn start命令单独启动。

注意第一次运行时需要下载大量编译依赖，耗时可能数十分钟。此过程严重依赖稳定的代理软件，否则将频繁遭遇链接超时和断开，导致无法运行。——> 整个过程一定要开着翻墙软件

注意：即便是不下载依赖，运行的时候也必须开着翻墙，不然大概率运行失败！！

注意：电脑内存不足也会运行失败！

cd AwesomeProject
yarn android
# 或者（这个好像是会自动重新编译环境文件的，比较好）
yarn react-native run-android
# 清除缓存
cd android && ./gradlew clean
#有时候rn会莫名其妙重新下载依赖，可能和网络有关，这个时候最好先清一下缓存，然后再下载，网络好了的时候就可以成功！！！

还有说法是这样启动：还没有试过！

npx react-native start

大坑：gradle 报错：Downloading failed: timeout

Downloading https://services.gradle.org/distributions/gradle-6.9-all.zip failed: timeout

Exception in thread "main" java.io.IOException: Downloading from https://services.gradle.org/distributions/gradle-6.9-all.zip failed: timeout

上述报错主要是下载超时造成的，这时我们只需要直接打开 https://services.gradle.org/distributions/gradle-6.9-all.zip ，下载 gradle-6.0-all.zip。若不知道自己所用的 gradle 是何版本则可以打开 android ->gradle ->wrapper ->gradle-wrapper.properties

下载完成之后，放到 C:/Users/Sonder/.gradle/wrapper/dists(目录中的 Sonder 为用户名)目录下

解压成 gradle-8.3 文件夹，然后放到运行生成的 gradle-8.3-all 文件夹里面

3.注意事项

1.运行之前需要先将模拟器打开！

2.同时保证内存的充足！

3.开发时在 vscode 进行即可，因为 android studio 没有 react 的高亮

4.vs 的插件里面有 rnf（rnfs）和 rnc（rncs）等快捷创建组件的命令！

4.开启全局调试器

先关闭项目

然后打开全局的 device manager，然后就可以控制一直显示在上方了

注意：调试地址为 localhost:8081/debugger-ui/，直接看控制台即可！

5.打开 debugger 菜单

在控制台输入 dev 即可，或者 devMenu

注意：尽量不要开启，因为可能会导致 app 的导航栏卡顿！