React Native学习笔记(1)–Windows开发环境搭建
一、React Native环境搭建
1、下载安装jdk
2、下载安装sdk
- 可以先安装Android Studio,然后使用其中的工具进行安装
- 可以用
http://androiddevtools.cn/
中的镜像镜像配置安装,能提升下载速度
3、安装c++模块
- (用于编译node.js用)可以安装windows sdk、cygwin或mingw等
4、安装node.js
5、安装git
6、安装好git之后再git.cmd.exe中设置全局镜像
- 命令:
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
7、在github上下载react native安装包
- 进入https://github.com
- 搜索react native,下载facebook官方版本到本地并解压
8、安装react native
- 使用git.cmd.exe命令工具进入到react native的解压目录,然后使用如下命令进行安装
- 命令:
npm instatll –g react-native-cli
9、创建react native项目
- 命令:
react-native init [项目名]
10、运行react native packager
- 进入到项目目录,然后使用如下命令运行
- 命令:
react-native start
- 运行后不要关闭命令行窗口,使用浏览器访问: http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本,如果可以,证明运行成功。如果不能访问可以检查8081端口是否被占用,命令:
netstat -aon|findstr "8081"
找出占用程序的pid,然后使用命令:tasklist|findstr "[程序PID]"
找到占用的程序,可以在任务管理器或者服务中关闭相应程序或服务
11、运行react-native(以android为例)
- 可以下载android模拟器,(可以用“BlueStacks”、“夜神安卓模拟器”、“逍遥安卓模拟器”)
命令:
react-native run-android
注意:
1、如果出现找不到sdk或者找不到android相关的sdk版本,需要打开sdk工具进行相应的升级
2、如果编译过程中发现下载gradle-2.4-all.zip十分缓慢,可以先到 http://androiddevtools.cn/ 找到gradle-2.4-all.zip这个文件的下载地址: http://pan.baidu.com/s/1c0dcgfe, 将它下载到本地。然后将
[项目目录]/android/gradle/wrapper/gradle-wrapper.properties
中的distributionUrl= https://services.gradle.org/distributions/gradle-2.4-all.zip
改为distributionUrl=file:///[本地保存的路径]
,让它本地离线下载。例如:distributionUrl=file:///E:/ReactNativeWork/gradle-2.4-all.zip
12、运行异常
- 第一次运行模拟器界面会出现错误(屏幕会红色),可以点击模拟器上面的摇晃手机图标,出现界面,然后选择
Dev Setting
,然后选择Debug server host&port for device
,在其中的ip地址端口中填写当前机器的ip地址加8081的端口号,例如:192.168.1.1:8081
然后再次点击摇晃手机按钮,点击Reload
即可. - 如果出现
com.android.builder.testing.api.DeviceException: No connected devices!
的错误,请确保Android虚拟机已经启动,并且通过adb devices
可以查询到, 例如:emulator-5554 device
.
二、WebStorm开发配置
1、下载开发IDE
Webstorm破解版地址:http://www.cr173.com/soft/130969.html
(也可以去官网下载,然后采用服务器注册方式进行破解)(请支持正版)
2、WebStorm配置React Native代码提示
- 在github命令工具中执行:
git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
然后在webstorm中file
–>import setting…
–>ReactNative.jar
,重启webstorm即可
End Write : 2016/10/13 10:30:19