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;
网友评论