windows下react-native 开发环境搭建

1、react-native安装

 npm install -g react-native-cli 

可以使用yarn代替npm，安装更快

yarn global add react-native-cli

校验是否安装成功

 react-native -v 

2、使用脚手架初始化项目

react-native init MyProject

时间比较长，可以多尝试几次

3、安卓虚拟机安装，并启动前

建议使用genymotion安卓模拟器（有真机的情况，使用真机）

4、运行项目

项目运行前，必须启动

cd MyProject
npm install 或 yarn
启动react-native服务
react-native start
在模拟器中运行
react-native run-android

第一次使用虚拟机运行时，会发生如下报错：

解决方式（为设备配置Debug server host & port）
Ctrl+M（或点击摇一摇）打开配置页面

配置完毕。点击R+R，reload页面（出现白屏时，构建静态资源目录）

使用VS Code + react-devtools + genymotion搭建开发环境

（推荐使用VS Code进行开发，Android Studio进行APK打包）

1、VS Code、react-devtools、genymotion搭建开发环境下载安装（略）

react-devtools安装方式
npm install react-devtools -g

2、VS Code RN 开发环境搭建

VS Code安装 React Native Tools（演示）

Debug Andriod调式器搭建

配置完成，点击启动debug调式模式
配置页面启动页更新

3、react-devtools进行页面样式调式

总结

1、开发环境：

推荐使用VS Code（代码开发、调式） + react-devtools（页面样式调式） + genymotion（安卓虚拟机）；

2、打包apk：

推荐使用 Android Studio；