想用React Native开发app的朋友,在搭建React Native开发环境的时候会遇到很多问题,以下是本人搭建React Native开发环境的一些经验和总结,希望对大家有所帮助,安装过程如下。
1、安装android开发环境和开发工具
下载jdk、androidStudio,安装android开发环境和开发工具,这方面的资料网上有很多,做Android开发的同学应该电脑上都装好了。
2、安装node.js
开发React Native 需要用到Javascript进行开发,而node.js 是一个Javascript运行环境,可到Node.js中文网http://nodejs.cn/下载,安装时根据提示安装即可。检查是否已经正确安装可在命令行执行 node -v 查看node.js版本,npm -v 查看npm版本,能输出node 版本号和npm版本号说明安装成功
3、安装react-native命令行工具
在命令行执行 npm install -g react-native-cli 安装React Native命令行工具,React Native的命令行工具用于执行创建、初始化、更新项目和运行打包等任务。
4、创建React Native项目
在你需要存放项目的文件目录下执行 react-native init AwesomeProject 命令,AwesomeProject是你的醒目名称这个名字可以随意自己命名。
5、运行react native packager
cmd到项目目录下执行命令: react-native start,请不要关闭命令窗口,否则服务会断开。使用浏览器访问: http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本,如果可以,证明运行成功。
6、连接usb调试端口
cmd到项目目录下执行命令:adb reverse tcp:8081 tcp:8081,最好使用android5.0版本以上的手机。
7、运行项目
cmd到项目目录下,执行命令:react-native run-android,第一次运行项目可能会出现错误(屏幕会红色),如果出现这种情况,查看项目src/main目录下是否有assets文件夹,React Native 需要将js文件打包成bundle文件放在assets目录下才能运行。如果没有assets文件夹,手动新建一个assets文件夹,然后在醒目根目录下执行命令:react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/,这个命令很长,复制粘贴就行,执行完后看assets文件夹下是否生成了bundle文件,成成说明项目打包成功了,再次运行项目,就不会报错了。