RN踩坑(一):环境搭建

android studio 教程 | 2018-12-15 12:09

一直听说React Native坑多

但好在我不是第一个吃螃蟹的人

我只是把别人踩的坑又踩了一遍而已……

只针对Windows平台,全程请使用科学上网

1.     Android Studio

访问Android Studio官网下载:

2.     React Native环境要求

NodeJs >  8.3

Python必须2.x

JDK必须1.8,不支持1.9及更高的版本 (这些个苛刻的条件就是填坑的开始……)

React Native的官网有详细的中文安装步骤:

3.     克隆项目到本地

首先要全局安装Truffle:

克隆react-native-box到本地:

打开Android Studio,File -> Import Settings 导入项目

4.     简单的修改和配置

打开android文件夹下的local.properties文件,将sdk.dir替换成自己本地的SDK路径

5.     编译和运行

在刚才android目录下运行gradlew build命令来构建项目

构建完成后,退回到react-native-box项目根路径下,运行npm install来安装所需模块

(此过程会耗时很久,可根据实际情况换成淘宝镜像)

打开Android模拟器,在根目录下运行react-native run-android命令启动:

至此还算顺利…….

但是……

6.     可能会遇到的问题

第一个坑:若启动后模拟器出项

Unable to load script from assets index.android.bundle on windows

可访问如下link自行解决

-to-load-script-from-assets-index-android-bundle-on-windows

第两个坑:若仍旧无法启动,也可能是缺少相关modules

特别是truffle-hdwallet-provider这个module,可先访问其Git官网(-hdwallet-provider)并找到package.json文件,可以看到这个module的当前的版本是0.0.7-beta.0

之后再回到你的工程根目录下,同样是找到package.json文件,在dependences下面找到对应的truffle-hdwallet-provider(如果没有就添加一个),把版本号改成0.0.7-beta.0,然后在该目录下运行npm install命令

此方法适用于所有缺少module的问题,即先在工程的package.json里添加你想要的module和版本号,然后再npm install

第三个坑:模拟器双击R键reload报错

模拟器启动出现Hello World只成功了一半,双击键盘上的R试试,你会回来点赞的,嘿嘿嘿…

要知道当运行react-native run-android命令时都发生了什么?

首先是启动node服务器,该服务器会监听8081这个端口,并且服务器会加载工程下的index.js文件,该文件为工程的入口文件(类似于main函数)。

你也可以在浏览器中访问http://localhost:8081/index.delta?platform=android&dev=true&minify=false

查看是否成功

模拟器与电脑连的是同一个WiFi,可为什么reload总是报错,网上找了很多贴子,都说是配置模拟器的Dev server & port为电脑IP:8081。我试过了不下十次,内网地址和外网地址我都试过了,依旧报错,又想到可能是防火墙的原因,关掉防火墙又试了不下十次…..

因为是面向Google编程,终于找到一篇贴子,对react-native run-android的命令又有了深刻的了解

运行这个命令会将主机IP直接映射到模拟器的IP上,如果发现8081端口被占用,可以通过react-native run-android –port [你想使用的端口号] 启动模拟器

好吧,可能我的电脑IP没有映射过去,之前在模拟器设置成电脑的外网IP:8081不行,既然模拟器也是在本地,试试127.0.0.1:8081

奇迹出现了….

感动中国….

我的R键都快被我摁坏了….

Reload成功啦!!!

Windows 下在模拟器内按下Ctrl + M打开开发者模式:

找到Debug server host & port for device,设置127.0.0.1:8081

第四个坑…

第五个坑…

就在我写这篇文章的同时,第n个坑出现了

我就加了一个module,要不要这么整我~

啊!!!

啊!!!

啊!!!

先写到这儿吧,我去填坑了……

最后特别感谢

同事:Derek、Bob Wang、XieWei

组织:StackOverflow、Github、CSDN