windows 下配置 react native 开发环境

来源:互联网 发布:python和php哪个好 编辑:程序博客网 时间:2024/05/23 21:44

windows 下配置 react native 开发环境

安装nvm

由于react native 需要使用 NodeJs 4.0以上版本,为了方便切换NodeJs,首先我们需要安装nvm。
你可以在这里查看nvm的安装教程:
https://github.com/creationix/nvm#installation
同时windows下的nvm在github上也有开源代码,你可以在这里找到它们
https://github.com/coreybutler/nvm-windows

下载最新的nvm并安装:
https://github.com/coreybutler/nvm-windows/releases/download/1.1.0/nvm-setup.zip

安装NodeJs

安装react native需要的NodeJs版本,我们这里安装5.0.0
$ nvm install 5.0.0

安装android sdk

安装android sdk,如果你已经有android sdk则不需要下载,下载链接:
https://developer.android.com/sdk/installing/index.html 官网下载地址,比较慢
http://sdk.android-studio.org/ 国内下载地址

安装完成后需要配置环境变量,在系统环境变量中添加
ANDROID_HOME把你安装SDK的路径赋值给它;
将ANDROID_HOME添加到Path变量中去
%ANDROID_HOM%;

安装react native

$ npm install -g react-native-cli

创建demo工程

$ react-native init AwesomeProject
安装所需依赖
在工程目录下(有package.json的目录下)
$ npm install

真机调试

首先需要启动react native的服务器,在demo工程目录下/AwesomeProject
$ react-native start

$ react-native run-android

真机调试需要使用电脑做服务器,所以电脑和手机需要在同一个wifi环境下,
查看windows本地ip地址,Win+R快捷键启动cmd命令行
$ ipconfig

查看你联网用的网卡的ip地址,如果是网线连接就看以太网适配器,如果是无线网卡链接就看无线局域网适配器,
192.168.x.x那个就是了

程序在手机上运行后会红屏;
(以下的摇一摇可以用adb shell input keyevent 82代替,不然调试的时候会很蛋疼)
这时候摇一摇手机,选择Dev Settings,再选择Debug server host & port for device。
将上面的ip地址填入框内192.168.x.x:8081端口号默认为8081,不填端口号就无法访问切记。

设置完成后,应用退回首页,摇一摇手机选择Reload JS。
然后就可以看到刚才 react-native start启动的服务有响应了,响应完成后App就可以正常运行。

以上,希望能够帮助初学react native的你。

1 0