好吧我就是个坑...
中秋佳节,在家闲着,于是终于抑制不住自己体内的洪(zuo)荒(si)之力,入了React Native的坑,把自己学习过程写下来,以后就能在基友面前炫耀下,啊哈哈哈哈(其实没什么好炫耀的,尤其对于我这种重度智商不在线的人)
好吧,作为一只不怎么灵光的家伙,遇到的坑可以说是黑历史了都...各种弱智问题都碰到了,下面来慢慢说...对了,可能下面提到的网站需要翻墙(否则速度慢或者打不开),关于如何翻墙,这个问度受或者bing(会造梯子的可以问谷攻)
这里参考了http://www.cnblogs.com/unofficial/p/4843734.html和http://reactnative.cn/docs/0.31/getting-started.html
安装nodejs和npm
其实这俩基友早就在一起了,去nodejs官网直接下载lts版就可以,直接下一步安装完成,大开命令行工具,分别输入node -v和npm -v就能看到版本信息
20160915215926.jpg
安装github(可选)
github安装跟我不对头,在线安装过n次,n次都失败了,这里给出离线包,当然还是推荐在线安装版,没准您成功了呢,嘿嘿
关于JDK和SDK
JDK没什么好说的,直接去JDK的官网下就可以,下载完成后配置环境变量.心中默念老师讲过的,右击此电脑(我的电脑,计算机,此电脑,要是有win11准备再换个什么名字?!),选属性balabala...
接下来就是传说中的了Android Stuido,这个庞然大物win下1个多G,官网上折腾了半天没下下来...于是放弃...后来在度受软件中心找到了安装包.其实还有其他解决方法,做安卓开发的一位基友推荐了androiddevtools,里面不仅有Android Stuido,还有SDK管理工具等一系列Android开发所用到的东西,虚拟机可以选择genymotion,速度更快,我...我当时都下好了Android Stuido了...genymotion...我想静静...下载太慢了...各种下载失败...我还是继续用蜗牛Android Stuido的模拟器吧.
我在这里遇到了第一个坑,没有配置SDK的path(我天真的以为选择Android Studio就不用配SDK的path了,脸红ing,其实上面第一个网址说明了要配置path...继续脸红...),导致了后面的错误,错误见下文.
下载react-native
装了git可以在git shell中使用下面的命令(引号中为你自己的路径)或者干脆跑到github上搜react-native直接下载zip压缩包
git命令:
git clone git@github.com:ALittleFox/ALittleFox.github.io.git "d:/reactNative"
安装npm install -g react-native-cli
这个比较简单,就一条命令记得一定有-g,要不不是全局安装,这里有个小插曲,跟基友说我要入RN的坑了,基友提供了要在react-native-master\react-native-cli目录下执行下面的命令的信息,于是乎就有了上面下载react-native.不这样会报错?不知道,基友也没解释清楚,只是说原来在哪看过一眼,这个等以后测试了再说原因.
npm install -g react-native-cli
安装helloWorld
第一个程序就这么来了,到你想在的目录下执行react-native init helloWorld,等一会儿,等他自动安装完成.
启动packager
打开helloWorld,执行react-native start,之后等提示"React packager ready."后打开浏览器输入http://localhost:8081/看是否有React Native packager is running.
运行起来GO
命令react-native run-android等一段时间,如果不报错的话,模拟器或者真机上会出现白色的界面,上面有下图提示,否则可能会遇到我踩到的坑...
我踩到的坑们:
坑一没配置SDK的path错误如下图
没找到sdk设置Path.jpg
解决办法:在环境变量中添加SDK的path
坑二SDK缺少某个版本的Build Tools,如下图
没找到sdk.jpg
解决办法:如果是Android Studio就打开File->Settings,下图
0160916000524.jpg
第一次尝试React Native
打开helloWorld下的index.android.js文件,类似下面的修改
Paste_Image.png
之后按下图进行模拟摇手机,出现菜单点Reload,之后就变成你修改的啦
20160916003335.jpg
好吧,我就踩了俩坑...因为数据线没带回家,所以这两天手机一直处于节能状态,也不能连真机,所以真机的坑还没踩...模拟器也只用了AndroidStudio自带的,不过好歹环境搭建好了,以后继续踩,嘿嘿~~
ps:关于npm慢的问题,网上有许多现成的方法,比如切换到淘宝的源,不过要是有有梯子,就用不到了.
pss:补充下win的命令
1.列出当前目录下的文件和文件夹 dir+回车
2.打开盘符 直接输入指定盘符回车如 f:+回车
3.打开文件夹 如打开当前目录下的app文件夹: cd app+回车
4.打开上一级目录: cd ..+回车
5.打开盘符根目录:cd /+回车
psss:win10下配置path不用再注意是否大小写英文分号了,吼吼吼~见下图
0160915214544.jpg
网友评论