首先本人本身是一名Android开发者,所以下面的React-Native都是基于window7环境和AndroidSDK上的。Mac环境没有触碰过,但是好像IOS没有这么多坑。
1、环境构建
首先我是基于本网的提示操作的:reactnative.cn/docs/0.42/getting-started.html
由于之前开发过Ionic1,安装了nodeJS,所以无须安装,需要安装的可以去NodeJS官网下载
react-native的中文网说需要安装此东西
![](https://img.haomeiwen.com/i1717635/f4e78e5550fd9e2c.png)
我看了一下安装此东西是为了安装nodeJS和Python 2,由于我已经安装了NodeJS,所以我没有安装那玩意,至于Python2我是去Python的官网下载的。(注意react-native说是Python2,因为Python个官网有2和3,我是下载2的),python的官网地址:python官网
现在应该剩下三个东西还没有安装:npm、Yarn、react-native;npm就不说了由于ionic开发的原因也装上了。至于Yarn和react-native可以按照react-native的中文网操作:
![](https://img.haomeiwen.com/i1717635/1cdc49b0dc2c8b69.png)
这些东西就是个”CV”,至于镜像就看需要吧,我个人是设置了镜像。
安装Android Studio和Java环境 AndroidSDK就忽略了,作为Android开发者你懂得。不懂可以去Android Studio的官网下载,现在2.3正式版,还有个2.4的,本人推荐下载2.3正式版。
这里也给自己记录一下,React-Native是向下支持到Android的版本为16的。
![](https://img.haomeiwen.com/i1717635/80d421ec86f0277f.png)
2、第一坑
这里想强调下,Android这个坑,其实我觉得挺讨厌的,就是gradle这个构建工具。
如果你下载Android Studio2.3后新建一个项目:
![](https://img.haomeiwen.com/i1717635/53a91c11b9292b02.png)
这玩意应该作为一名Android的开发者都遇见过;
Android Studio已经出到2.4了,为什么这个东西都不给点提示它正在干嘛。众所周知中国开发者都要面对翻墙的问题,出现这个原因很大是因为它在下载gradle。
为什么要说这个呢,因为当走这段命令的时候,
![](https://img.haomeiwen.com/i1717635/79712fc05b57e471.png)
会下载gradle,这里建议作离线下载,安装,不然会很慢。
![](https://img.haomeiwen.com/i1717635/48d9fcd69e054c89.png)
图中可以看见你需要下载的gradle,下载gradle地址:services.gradle.org/distributions/
此网址包含了很多个gradle版本。下载完成后,不用解压放在
存放位置:C:\Users\用户名\.gradle\wrapper\dists\gradle-1.XX-all\3jdgemv0iv8uqohg3kcp2o88r1\gradle-1.XX-all.zip
上面的“3jdgemv0iv8uqohg3kcp2o88r1”这个文件夹不同电脑应该不同。
3、安装项目
完成gradle下载后,
![](https://img.haomeiwen.com/i1717635/9b41ec5740489b76.png)
可以根据上面的命令初始化react-native项目,注意AwesomProject是你的项目名称可以随意更改。
4、构建完成后第二个坑
构建后你的项目文件夹应该有这些东东:
![](https://img.haomeiwen.com/i1717635/e4e2605637c9de32.png)
看到这些东东之前,应该会看到真机(我是连真机测试的)爆红的一篇:
遇到的情况应该这样,图是网上找的,因为这个问题我已经解决了,在本机上当时没有截图,图上大概就是说找不到服务,这个问题是其中一个坑,我先说这个吧。
这个问题的解决方法:
1、真机测试,真机的wifi要和电脑上是同一个网络;
2、看真机连上电脑没有:命令行:adb reverse tcp:8081 tcp:8081
8081是React-Native默认的服务端口
第三个坑
这里涉及到个坑,不一定每一位都会遇到过;就是端口给占用了!!!
下面命令可以看到8081是否给占用和哪个应用占用了:
在CMD窗口中输入netstat -aon|findstr 80,80表示要查看的端口号。
在CMD中继续输入以下命令:tasklist|findstr "892",892就是之前的进程ID
这里如果给占用了,输入命令启动服务命令行会停留很久在:"loading dependency graph done"
在真机上点击“ReloadJS”迟迟没有反应;
第四坑
接着之前所说的,当"react-native run-android"命令输入完命令行跑完编译完之后,真机估计都是爆红一篇,图我当时没有截,我记得不是一看到爆红就是一开始没有爆红,reload之后就爆红了。
当时根据提示上网查了,就是在
![](https://img.haomeiwen.com/i1717635/06b8e0d0e3f14331.png)
这里没有这两个文件,这两个文件是输入命令行来的:
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
这里注意:第一步是在Android项目构建assets文件夹,不然执行这段命令会找不到assets文件夹
第二步:要留意这两个文件的安装路径:android/app/src//main/assets和android/app/src/main/res
当时网上给的路径不正确我迟迟找不到原因。。。还有这段命令的符号都是英文符号如果复制上命令行看符号好像不对劲就手动更改一下符号。
(React_Native0.51版本)由于现在再次尝试React-Native cli没有创建一个index.android.js文件所以上面的命令要报找不到目录:这里可以更改一下命令:
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
其实就是将 index.android.js更改为index.js
基本上第一个react-native项目就这样了,后面有些说的有点错乱,但基本上都把自己遇到的坑都描述了一篇。
网友评论