先看一下环境搭建成功的样子吧。这是在安卓模拟器( BlueStacks )中显示是这样的。
第一步:安装jdk
去官网下载
这里根据自己电脑系统类型选择对应的jdk版本,我本机是64位的。所以选择64的。
下载完成后双击按照默认的安装即可。安装完成后需要将jdk添加到环境变量里面去。
如下图:
然后测试jdk是否安装到环境变量中,在cmd 输入 java -version
下图这样就代表已经ok了。
第二步:安装node
去官网下载,左边是长期稳定版本,右边是node最新版本,这个版本添加了一些新特性,根据自己喜好下载就好了。
下载完成后,按照默认的安装提示下一步就ok,安装时已经自动配置了环境变量,所以安装完成后,直接在命令行输入 node -v 查看一下就可以了
第三步:安装Android studio
Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。
这个工具有点大,1个多G。如果觉得太大,也可以直接下载 Android SDK
官方是建议下载 studio工具的,因为是集成了 sdk 和模拟器省的你再去折腾了。
安装的过程请参考react中文网。安装完成后将sdk目录添加到环境变量中
同样将如下的目录也添加到环境变量中( 这里的环境变量添加在系统path下 )
在命令输入 android 弹出android sdk框 如下图:
确认红框都已安装
第四步:安装react-native命令行工具
命令行中输入
npm install -g react-native-cli 如果因为墙的原因建议通过
git clone https://github.com/facebook/react-native.git 下载到本地
第五步:创建项目
我当前是在F盘,所以我在F盘打开cmd窗口,然后再命令行中输入
react-native init reactApp
这样就代表 我们正在从npm仓库去下载安装react-native。(这里要等很长时间。。)
因为墙的原因,导致我们下载会很慢,而且可能会出现问题,这里最好是将npm改成淘宝架设的镜像,加速下载(不能保证改了,就一定下载会快)
淘宝npm镜像:
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
下载完成后如下图
然后在重新在这个目录下面打开一个cmd窗口运行packager服务 react-native start
这条命令是开启程序服务。
看到了8081没,这条命令让程序开启了8081端口,可以用浏览器访问下这个地址http://localhost:8081/index.android.bundle?platform=android
看看是否可以看到打包后的脚本,如下图
第六步:run android app
刚刚已经开启了 packager服务,所以运行上面的命令需要重新在目录下开启一个cmd窗口
reac-native run-android
已经安装成功了,可以去我们的模拟器去看一下,我这里的模拟器是BlueStacks
模拟器出现下图红屏,其实这样就已经代表我们把程序跑起来了。这里还需要在设置下
如果是真机的话,需要摇晃下手机,Bluestacks模拟器按键盘上的菜单键,通常在右Ctrl的左边 或者左Windows键旁边
选择 Dev Settings 出现下图
然后再选择:Debug server host for device
设置编译环境PC的IP地址,例如:192.168.1.158,去控制台 ipconfig看下本地的ip是多少,确保手机与编译环境在同一WIFI环境下(IP段相同)
然后我们重新运行下 react-native run-android 就可以了。
建议去看下:http://blog.csdn.net/u011068702/article/details/49448043