我要评论官网地址： react native 中文网
正文开始
一、下载安装 node 和java se development kit (jdk)
一、安装node
1.node安装教程
安装位置最好不要进行改动
下面就直接点击install进行安装即可，因为我已经安装过下面的内容就不展示了
2.使用node -v指令来测试node有无安装成功
node -v
v18.16.0
3.安装yarn
yarn是 facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。
第一步骤已经安装了node，现在可以打开cmd执行以下命令；
npm install -g yarn个人习惯使用pnpm，和yarn作用功能一样。
npm install -g pnpm
安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。
设置powershell的执行权限：
1.在开始搜索框(win+s)中搜索powershell，右键，以管理员身份运行
这里使用win11进行演示，win10步骤一样
2.执行set-executionpolicy remotesigned命令，并输入y选项
set-executionpolicy remotesigned
执行策略更改
执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险，如 https:/go.microsoft.com/fwlink/?linkid=135170
中的 about_execution_policies 帮助主题所述。是否要更改执行策略?
[y] 是(y) [a] 全是(a) [n] 否(n) [l] 全否(l) [s] 暂停(s) [?] 帮助 (默认值为“n”): y这里如果选择y还是出现“无法将 yarn 项识别为…”的问题请输入a
二、安装java se development kit (jdk)
如果无法更改jdk版本那就放弃吧，请移步至expo搭建教程：
1. 下载java development kit [jdk]
这里建议使用oracle jdk的方式，下载地址
打开官网，如下图所示，点击下载jdk-11.0.20_windows-x64_bin.exe文件，因为安装exe文件后，会自动配置环境变量，无需手动配置。
2、同意协议后继续下载
点击第一步后会打开如下弹窗：
3、登录/注册oracle
有账号的小伙伴可以直接进行登录，如果没有注册过，需要先注册后登录
需要填很多很多很多的信息，慢慢来小伙子，要有耐心！心急吃不了热豆腐
4、安装jdk-11.0.20_windows-x64_bin.exe
安装这个就很简单，直接一路下一步就好了，安装路径建议用默认路径。我这里安装过就不展示了
5、查看是否安装成功
打开cmd，输入 javac -version ,如果能看到版本号就说明安装成功了
javac -version
javac 11.0.20 
二、搭建android 开发环境
一、下载 android studio
国内用户可能无法打开官方链接，那就需要先连接vpn，再进入官方链接下载。没有vpn就自行使用搜索引擎搜索可用的下载链接。
点击进入 android studio
点击滑动到底部勾选协议
下载得到 android-studio-2022.2.1.19-windows.exe，双击打开安装
二、安装 android studio
作为资深安装工程师，告诉你安装技巧就是，一路next，最后install。
勾选打开android studio会自动打开android studio
三、配置android studio
1、选择方式
打开后会弹出一个弹窗如下，默认选择第二个选项就好
2、是否要配置代理
下一步如果出现如下弹窗，就是想让你配置一个代理，在我们没有熟悉 android studio或者没有经常用的时候，这个配置无需理会，点击 cancel 关闭弹窗
3、进入初始配置页面，点击next
4、选择自定义安装
5、选择安装路径
这里使用默认路径即可，直接next
6.选择主题背景颜色
选哪个都无所谓，看个人喜欢
7、勾选要下载的内容
重点来了，一共需要下载的包是1.97g，这个android virtual device包就占了1.44g，走下一步会下载得非常慢，有时候是下载进度一动不动，不过没关系，后面会讲解决方案，先继续走。
像下图这样全部勾上，包括android virtual device，android sdk location路径也是默认就好(防止后续找不到)，点击 next 走下一步：
8、这一步是检测到你可以设置系统加速，推荐就好，继续点击 next 走下一步：
9、安装确认，点击next
10、要下载的详情
显示都需要安装什么包，继续next
11、同意协议
分别点击左边的三个项目，勾选右边的 accept 表示同意协议，然后点击 finish：
12、进入安装个个包的界面
点击 show details 查看要下载的具体内容
13、拿到模拟器链接
这一步主要是防止模拟器文件下载失败，或者下载速度慢的问题
14、下载模拟器包x86_64-33_r10.zip
把复制链接放到浏览器地址栏，回车下载，直接就是满速下载，无需挂代理
十几分钟就下载好了，可以让它先下载，先走后续的步骤。
15、关闭下载，关闭android studio
先点击 cancel 关闭下载 ，然后点击 finish，然后点击右上角 x 关闭android studio：
16、重新打开android studio
重新打开android studio，就又回到初始步骤，按照之前的步骤继续走。
17、下载完成
点击 finish 完成
18、打开项目
打开react native项目，还没项目的就先去 new 一个项目：
19、打开sdk manager
打开项目后，就会像下图这么展示，
点击左上角file，选择settings，搜索android sdk，复制下图sdk路径
粘贴到文件夹目录，回车打开sdk目录：
20、解压模拟器
在sdk目录下面找到x86_64文件夹，把（14）步骤下载的模拟器压缩包（这个包解压出来刚好是x86_64文件夹）解压到这个目录替换掉这个文件夹，如下：
21、配置sdk
然后点击"sdk tools"选项卡，同样勾中右下角的"show package details"。展开"android sdk build-tools"选项，确保选中了 react native 所必须的33.0.0版本。你可以同时安装多个其他版本。
然后点击"apply"来下载和安装这些组件，弹窗确认，点击 ok
等待下载完成点击finish，然后关闭sdk manager即可
22、创建模拟器
点击 create device 按钮
23、配置android_home 环境变量
react native 需要通过环境变量来了解你的 android sdk 装在什么路径，从而正常进行编译。
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为android_home的环境变量（系统或用户变量均可），指向你的 android sdk 所在的目录，具体的路径可能和下图不一致，请自行确认，
参考第19步打开sdk manager，复制sdk路径：
24、把一些工具目录添加到环境变量 path
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量，选中path变量，然后点击编辑。点击新建然后把这些工具目录路径添加进去：platform-tools、emulator、tools、tools/bin
%android_home%\platform-tools
%android_home%\emulator
%android_home%\tools
%android_home%\tools\bin
三、创建运行react native项目
一、创建react native项目
npm uninstall -g react-native-cli @react-native-community/cli#安装新版本react-native
npm install react-native -g使用 react native 内建的命令行工具来创建一个名为"awesomeproject"的新项目。这个命令行工具不需要安装，可以直接用 node 自带的npx命令来使用：
npx react-native@latest init awesomeproject二、运行react native项目
确保你先运行了模拟器或者连接了真机，然后在你的项目目录中运行yarn android或者yarn react-native run-android：
cd awesomeproject
yarn android
# 或者
yarn react-native run-android输入命令后会自动进行一系列的打包编译工作，并自动安装到模拟器或者你的真机上：
自动弹出界面：
最后最后最后：
发表评论