接下来给大家讲一下在Windows环境下安装React Native的环境,React Native是Facebook推出的开源项目框架,类似原生的APP的运行和响应速度,JS和HTML的混合,性能还算不错。详细的大家就百度或谷歌查一下吧。很像JAVA和HTML的混合语法。本文主要针对Android。网上很多教程是旧的,本教程应该算是最新的了。
官方Github地址:
https://github.com/facebook/react-native/
1、首先你电脑已经安装了Android Studio,JDK。这就不用说了,会Android的电脑都会有这些。
2、下载安装Nodejs。去官网下载:
https://nodejs.org/en/ ,推荐最好下LTS版本,12M左右。
正常安装即可。
3、安装完Nodejs后,运行cmd打开命令窗口,输入:node -v,如果正确获取到Nodejs版本号,那就说明安装正确。也可以输入npm,看输出有无错误。
4、安装React Native命令行工具react-native-cli
注:如果你的电脑访问国外的网络很慢,又不能翻墙,那就使用国内镜像吧,这里以淘宝镜像为例,输入如下命令:
npm config set registry https://registry.npm.taobao.org
npm info underscore
会返回淘宝镜像返回过来的一系列信息字符。
输入命令:
npm install -g react-native-cli
5、创建一个新项目,名字可以按照你的需要命名。
react-native init AwesomeProject
这里按照官方写的,叫:AwesomeProject。
如果你电脑没安装yarn,会自动先安装yarn。
Yarn是什么?百度或谷歌下。当然,yarn不翻墙的话下载很慢,所以推荐大家去官网下载直接安装即可。
https://yarnpkg.com/zh-Hans/
下图是命令安装成功后的界面:
6、目录结构看下:
7、运行我们的React Native服务器端:输入命令行前,当前所在路径要是项目的根目录。
react-native start
8、浏览器就可以运行访问编译了。
9、运行编译项目:
刚才运行服务器的命令窗口不要关闭,另外打开一个命令窗口,输入:
react-native run-android
IOS的话,输入:
react-native run-ios
前提是 已经运行启动了模拟器,或者连接了真机才可以这样输入命令。
第一次运行,如果你没有安装gradle-2.14-all的话,会进行下载。
还有一种方式编译运行,就是用Android Studio直接打开android工程文件,运行编译到手机或者模拟器即可,支持Genymotion。如果想手机的React-Native APP可以访问我们的刚才电脑上运行的服务器,那么一定要在同一个wifi下。
运行正常的话,会出现下图界面。
如果出现红色的错误,可以点击菜单键或者长按菜单键,重载或者设置服务器IP地址和端口号。
如果出现下图错误的话,进入项目根目录输入如下命令:
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
输入如上命令就直接把JS编译打包进APP里了。
现在就可以编辑项目根目录的index.android.js文件了。然后重新启动APP就可以看到修改后的效果了。
注:其实一些命令也可以在Android Studio的Terminal命令窗口输入,和在cmd命令窗口输入一样,很方便。
参考文献: