React Native - window 环境安装与配置

React Native - window 环境安装与配置

接触RN也有10来天了，记录下环境安装上遇到的坑和工具的配置。环境为win10 64位。

环境安装

环境安装大体按照官网上来就行，但有些地方要注意，以下，做下补充。

安装Chocolatey

安装教程

请使用管理员身份运行cmd.exe

python环境变量配置

不配置python环境变量会报以下错误

gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack     at failNoPython (C:\Program Files (x86)\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:401:14)
gyp ERR! stack     at C:\Program Files (x86)\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:356:11
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:117:15)
gyp ERR! System Windows_NT 10.0.10586
gyp ERR! command "C:\\Program Files (x86)\\nodejs\\node.exe" "C:\\Program Files (x86)\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd C:\WINDOWS\system32\AwesomeProject\node_modules\utf-8-validate
gyp ERR! node -v v6.2.2
gyp ERR! node-gyp -v v3.3.1
gyp ERR! not ok
npm WARN install:utf-8-validate@1.2.1 utf-8-validate@1.2.1 install: `node-gyp rebuild`
npm WARN install:utf-8-validate@1.2.1 Exit status 1

故进行python环境变量的配置

python环境变量配置

node.js安装注意事项

按照官方文档上写的

choco install nodejs.install

执行，会安装最新版本，这会导致在后面init项目的时候，出现以下错误

C:\WINDOWS\system32\myProject\node_modules\bufferutil>if not defined npm_config_node_gyp (node "C:\Program Files (x86)\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "" rebuild )
MSBUILD : error MSB1009: 项目文件不存在。
开关: build/binding.sln
gyp ERR! build error
gyp ERR! stack Error: `C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onExit (C:\Program Files (x86)\nodejs\node_modules\npm\node_modules\node-gyp\lib\build.js:276:23)
gyp ERR! stack     at emitTwo (events.js:106:13)
gyp ERR! stack     at ChildProcess.emit (events.js:191:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:204:12)
gyp ERR! System Windows_NT 10.0.10586
gyp ERR! command "C:\\Program Files (x86)\\nodejs\\node.exe" "C:\\Program Files (x86)\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd C:\WINDOWS\system32\myProject\node_modules\bufferutil
gyp ERR! node -v v6.2.2
gyp ERR! node-gyp -v v3.3.1
gyp ERR! not ok
npm WARN install:bufferutil@1.2.1 bufferutil@1.2.1 install: `node-gyp rebuild`
npm WARN install:bufferutil@1.2.1 Exit status 1

后来，发现安装Visual Studio2015后，错误消失。

其实，我们完全可以去node.js中文网去下载长期支持版本



此时，便不用再安装Visual Studio2015了。

WebStorm配置

由于Android Studio和WebStorm同源于IntelliJ IDEA，所以使用WebStorm非常顺手，同时，WebStorm又是前端的开发神器，所以，开发工具当然选WebStorm了。

以下做下RN配置

切换JavaScript版本

file->settings->Languages & Frameworks->Java Script language version ->设置为JSX Harmony

ReactNative 代码智能提醒

git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate

在WebStorm上安装

file -> import settings -> ReactNative.jar

使用方法

通用方法

直接输入组件 或 Api 名称的首字母, 比如想要 View ,只要输入 V自动提示代码里就会看到 View

StyleSheet属性提示

首先 按下 command + J , 然后输入属性名的 首字母

如: 输入 f ,会自动提示 fontSize,fontFamily,fontStyle…等等

其他

替换为国内镜像

由于众所周知的网络原因，react-native命令行从npm官方源拖代码时会遇上麻烦。请先将npm仓库源替换为国内镜像

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

window上reload失败

我只想说，我重启电脑后，就好了。。。

虚拟机上找不到menu按键

在cmd中输入

adb shell input keyevent 82

即相当于按下了一次menu键

关于Android设备的连接

要保证adb只连接了一台Android机器 (包括虚拟机和真机)

可以用 adb devices 进行查看当前连接着adb的机器

还有，RN只支持Android4.1以上的机器