windows下react-native 开发环境搭建

2018-01-04  本文已影响0人  蓬蒿151

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;

上一篇下一篇

猜你喜欢

热点阅读