React Native的环境搭建

引言

刚从平地里起了一幢名为皮皮屋的高楼，我也变成站长了~思想上有点飘，听信了某人的谗言，居然开始进军app了？如何从Javascript快速入手app开发？我选择react-native，因为我的网站使用React搭建的，当然选择同家族。然而我发现，即使你的网站是用React搭建的，上手react-native搭建app也十分棘手。本篇用来记录从海里建立react-nativeapp的过程。

环境搭建

我差一点就被环境搭建劝退了。
官方文档（英文、中文）都写的挺好的，分了三种开发平台：macOS、Linux、Windows，对应两种app：IOS、Android。由于后续安装过程需要FOCN，我的手机是安卓的，我就选择 Windows+Android 的方向来搭建环境。

搭建 Windows+Android 的 react-native 环境，你需要安装：Node 8.3+、Python 2、JDK 1.8+、安卓开发环境

😊中文官网让你注意版本号，其实除了Python要2，其它最新的就行了😊
😊英文官网让你使用choco安装环境，亲测后千万别用，反正不适合我😊

Node 8.3+

找到Nodejs官网下载页（英文、中文），点击下载最新稳定版本（LTS）的Windows Installer(.msi)栏目中对应你的电脑位数。中文官网下载页只有最新稳定版本。

下载完后，点击安装。安装路径无所谓，保持全英文。

Python 2

找到Python官网Windows下载页，千万别往下拉滚动条。。。最上面最新稳定版本，点击Latest Python 2 Release - Python 2.7.17，下载对应你的电脑位数的安装包，如下图。
下载python2.png

下载完后，点击安装。安装路径无所谓，保持全英文。

JDK 1.8+

找到JDK官网下载页，点击JDK Download，调转后拉到网页最下面，点击Windows x64 Installer后面连接下载。

下载完后，点击安装。安装路径无所谓，保持全英文。

安卓开发环境

两个官网都建议你下载Android Studio，Android Studio可用用来写代码、模拟安卓机、管理安卓sdk。所以，其实不一定要下载Android Studio，你可以下载你喜欢代码编辑器写代码、你喜欢的安卓模拟器模拟安卓机、你喜欢的安卓adk管理器。我用vs code写代码、用genymotion模拟安卓机、用Android Studio管理安卓sdk。

😊建议不要使用Android Studio的模拟器，因为安装起来很容易失败😊

Anroid Studio

下载、安装、使用稳定的FOCN软件
找到Android Studio官网下载地址（英文），点击下载。后面我发现这个地方不需要FOCN也可以下载
下载完后，点击安装。安装路径无所谓，保持全英文，建议盘符://Android/Android Studio。如果使用其它安卓模拟器，下图Android Virtual Device可以不勾选
这就安装完了？不，点开图标会弹出初始化设置，其实就是继续安装。Next之后点击Custom自定义安装
点到这里，前面三个是默认的，如果使用其它安卓模拟器，下图Performance、Android Virtual Device可以不勾选。建议盘符://Android/SDK。
最后，也是最重要的一步。！！?等待?！！。直到提示安装完成。

😊全程需要保持稳定的FOCN工具😊
😊最后一步很容易安装失败因为躁动的FOCN工具。确保FOCN工具稳定后，点击Anroid Studio图标重复初始化设置😊
😊！！💪等待💪！！😊

genymotion

听说Android Studio很重，模拟器很卡，搜索到genymotion评价很好。决定就是你了。

找到genymotion官网（英文、中文）
注册账号，不注册无法下载。英文官网有Cloud Sign In和Desktop Sign In。云端登录是该公司云平台账号，桌面端登陆就是这个产品的账号。我注册的Desktop Sign In
登陆账号后，点击这里下载with VirtualBox版本
安装完成后，打开应用，登陆账号，设置ADB为你安卓sdk安装位置
拉到列表最下面，点击ADD CUSTOM DEVICE自定义安卓手机配置

😊自定义手机配置后安装很慢，可能因为没有断开FOCN工具，这里不要FOCN速度快😊

配置JDK、Python、Android sdk的环境变量

Windows配置环境变量的地方如下图
Windows配置环境变量.png

点击新增，添加如下内容，变量值为你Android sdk安装路径
双击Path，新建如下红框内容，路径均指向你的安装位置。我这里nodejs、npm的两条是安装nodejs后自动添加的。没有的请自行添加。

验证各类软件均安装成功

使用Windows新的命令行工具PoweShello(￣▽￣)ブ

以下命令都有输出版本号，安装成功

java -version
python -V   //python -大写v
node -v
npm -v

图片.png

开启react-native新时代

初始化

网上各类教程、问答和中文官网都让你切换淘宝源、使用FOCN工具以加快后续流程速度。但是，亲测并不需要这些乱七八糟的操作。关闭FOCN工具，不使用淘宝源，后续流程可以很流畅的进行。建议关闭FOCN工具，FOCN的话初始化巨慢。
在genymotion中打开模拟机
打开powershell，cd进入你想创建你的项目的位置，运行命令npx react-native init 你的项目名字。不要自己新建文件夹，react-native init会帮你创建文件夹的。在命令后面加--version x.xx.x可以用来创建指定react-native版本号的项目。
最后，也是最重要的一步。！！?等待?！！。直到提示安装完成。