从零开始的React Native

前端web项目做的比较多，最近捣鼓了一下移动端的开发，因为最先接触的就是react嘛，所以就从react native下手，这不看不知道，一看就劝退啊，搭环境是真的麻烦，所以就我个人踩过的坑来记录一下哈哈

设备：

1. 电脑（我用的win10）
2. 手机（我这里用的是基于android5.1.1的安卓机）
3. 可以传输数据的数据线一根（连接手机和电脑）

注意：有的数据线是只能充电，不能传输数据的，要注意检查一下

搭建步骤：（以下以win10 + android平台为例）

1. 电脑环境的准备
   Node，JDK
   Node 的版本应大于等于 12，而 JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本，注意 1.8 版本官方也直接称 8 版本）
   这里node环境和jdk的安装就不细说了，网上都有详细的教程，注意版本就行了。

2. Android Studio
   根据 React Native 中文网 的搭建步骤，还要安装一个叫Android Studio的软件用来获得编译 Android 应用所需的工具和环境，暂时先根据官方文档来吧
   咱先下载一个安装包，地址可以用官网提供的 Android Studio下载地址
   下载完就点击安装，就正常安装，没什么要设置的，
   

   image.png

下面这里建议把 Android virtual Device(虚拟机安装文件)也勾选上

image.png

软件安装路径设置，默认还是自己设置都行，你开心就好...

image.png

接下来就等它安装完成就好

3.Android SDK
！！！最重要也是最麻烦的一步来了！！！

官网明确表示了译注：请注意！！！国内用户必须必须必须有稳定的代理软件，否则在下载、安装、配置过程中会不断遭遇链接超时或断开，无法进行开发工作。某些代理软件可能只提供浏览器的代理功能，或只针对特定网站代理等等，请自行研究配置或更换其他软件。总之如果报错中出现有网址，那么 99% 就是无法正常连接网络。

所以先准备正常连接网络
配置dl.google.com的国内镜像源
打开一个 ping检测网址
然后输入dl.google.com进行检测

image.png

在结果列表中选择一个响应时间最短的IP

image.png

打开电脑上的host文件（路径：C:\Windows\System32\drivers\etc\host），添加映射

image.png

然后打开cmd，输入ping dl.google.com，能ping通就表示没问题了

根据官网步骤，打开刚刚安装完的Android Studio，它会弹框显示找不到Android sdk列表，点击Cancel

image.png

然后会显示找不到找到Android sdk，点击Next

image.png

这里都勾上了，下面可以设置一个Android sdk安装目录，也可以默认，继续Next

image.png

继续下一步

image.png

安装

image.png

完成

image.png

如果一切正常的话，到这里环境就算搭好了，可是偏偏意外就那么多，不知道是目录问题还是网络问题，我在下载sdk那里始终是失败的...设置网络代理也不行，然后在设置里设置sdk目录的下面提示 'the android sdk location cannot be at the filesystem root'，这提示属实没看懂...我设置了好多目录路径都不行啊，算了，Android Studio下不了，咱自己下载sdk。

我自己在找了个工具环境挺全的地址 AndroidDevTools
进入网站，下载一个包含SDK manager的SDK工具包

image.png

这里推荐下载zip包，直接解压到自己设置的sdk目录就可以用了，很方便
解压后有一个SDK Manager.exe，点击运行

image.png

然后下载对应的sdk环境资源就好了，关于下载哪些环境和配置环境变量，可以参考 Android SDK 安装及环境配置教程

上面的弄好之后，直接回到Android Studio设置sdk目录那里，指定目录为刚刚SDK Manager所在目录，然后环境搭建就算做好了，可以试着进行项目开发了。

4. 搭建新项目
   根据官网流程，可以使用react native内置模板去创建初始化项目
   先安装react native依赖

npm i react-native

然后新建初始化项目FirstAndroid

npx react-native init FirstAndroid

项目创建完后不着急运行，先连接上我们准备的android/ios设备

5. 连接设备
   用数据线连接电脑和设备
   这时候打开命令窗口，运行命令

$ adb devices
List of devices attached
9d67bce2        device

如上，如果看见列表中存在设备，则连接成功，否则检查问题

• 数据线是否可以传输数据
• 手机的调试模式是否打开
• 手机是否显示连接了电脑

6. 运行项目
   进入项目目录，使用yarn命令启动项目

cd FirstAndroid
yarn android
# 或者
yarn react-native run-android
#或者
npx react-native run-android

如果配置没有问题，你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖，耗时可能数十分钟。此过程严重依赖稳定的代理软件，否则将频繁遭遇链接超时和断开，导致无法运行。

我在这里的时候中间出了error日志，根据日志提示，sdk android版本不匹配，然后我打开SDK Manager又下载了对应版本的android，之后就成功了，这里出问题不要怕，根据日志去寻找问题解决问题就好

注意：在启动过程中，时刻观察命令窗口的日志和手机屏幕，过程中会弹出一个node窗口用于控制项目，当启动命令窗口到了app:installDebug这一步的时候，手机会弹出一个类似安装手机app时的安装界面，这是因为手机要安装app-debug.apk去运行项目，要手动点击安装，项目才会成功启动，否则项目会启动失败

当命令窗口显示如下，则项目运行成功

BUILD SUCCESSFUL in 45s
29 actionable tasks: 2 executed, 27 up-to-date
info Connecting to the development server...
info Starting the app on "9d67bce2"...
Starting: Intent { cmp=com.firstandroid/.MainActivity }

这时候手机界面也是咱的项目界面啦。综上，如果你不用Android Studio编辑代码/启动代码的话，Android Studio暂时也就没啥用了，啊哈哈...

参考：
Android Studio安装教程（超级详细）
Android SDK 安装及环境配置教程