ReactNative环境安装与使用
参考官方教程:http://facebook.github.io/react-native/docs/getting-started.html>Building Projects with Native Code>选择操作系统、目标设备
注意以下是windows操作系统,测试Android设备的教程,最好结合官方文档一起看
一、用电脑还是手机
1. 手机上安装运行(不建议使用,很慢,电脑可以)
在cmd命令行,最好以管理员身份运行
npm install –g create-react-native-app
create-react-native-app app (app是文件名)
cd app
npm start
注意:在这一步可能会遇到报错:npm 5还不支持
解决:将npm5转化为npm4: npm i npm@4 –g
npm start成功运行之后会在cmd框中会有二维码,用Expo手机应用可扫一扫,Expo在国内的应用市场就可以找到
注意:开发的机子与扫码的手机要在同一个局域网才行
2. 电脑上安装模拟器运行(电脑4G内存以上,否则还是用手机吧)
1.安装node
安装:网上搜索下载安装即可
检测方式:命令行运行node –v,安装成功的结果为node的版本号,否则既不是内部命令也不是外部命令
2.安装Chocolatey
参考官方教程:https://chocolatey.org/install
用cmd.exe的运行以下命令:
@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
用PowerShell.exe运的行以下命令:
Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
检测方法:choco –v,如果不成功,请去官网复制以上链接
3.安装 python2
choco install python2
检测方法:python -v
注意:如果显示既不是内部命令也不是外部命令,则关了cmd,重新打开再测试一遍
4.安装jdk8
choco install jdk8
检测方法:java -version
注意:如果显示既不是内部命令也不是外部命令,则关了cmd,重新打开再测试一遍
5.下载包react-native-cli
npm install -g react-native-cli
到这里需要的包差不多下好了,接下来是很花时间的安装编译器,在这里Android Studio用的最多的功能是手机模拟器功能,代码可以在自己喜欢的编译器上编辑
二、下载并安装Android Studio编译器
1. 下载Android Studio
外网,下载(600多M),进不了的去国内市场找破解版
2. 安装
一路next,之后会自动下载组件,时间非常长,要有耐心
注意:记住Android Studio保存目录,第4步配环境变量需要
3.安装安卓sdk
根据网站教程,勾选5个下载项,下载时间也很长,与前一步时间加起来2个小时左右,网较慢的情况
4. 配置环境变量
按照官方文档即可
四、测试
1. 新建项目
react-native init AwesomeProject新建一个项目
用Android Studio打开,点击AVD manager按钮,新建一个虚拟设备运行
注意:AVD manager在屏幕的右上角图标,谈紫色图标,如果是灰色的不可点击,则你的sdk没下完整,还需要下sdk,方法见如下1、2
1.configure:
看底下类似于控制台的地方的提示 2.还有sdk没下,可以新创建一个项目打开,看报错提示,点击下载。
2 新建项目来获取提示需要下哪些包:
左上角file>new...创建一个项目有点慢,等着吧
建好之后界面会有红色的提示,点击安装这些sdk即可
2.新建一个虚拟设备
根据官方教程添加一个虚拟设备一步一步来,如果提示HAXM错误信息,如果显示disableed,可以进入BIOS设置为enabled,方法如下:
第一步:重启电脑,一直按del键进入BIOS(不同电脑进入BIOS方法不一样,问度娘);
第二步:在BIOS里,选高级设置>configure...>cpu...找到Intel- virtualization Technocology 选项,调整enabled即可
第三步:保存,启动电脑。
以上都做好之后,就可以在Android Studio中,打开你的react native项目,点击AVD manager按钮,选择已经建好的虚拟设备,点击设备右边的绿色的箭头按钮RUN,安卓手机模拟器启动之后
在命令行输入
cd AwesomeProjectreact-native run-android //运行项目,等待一段时间大概半个小时(好像没那么长时间),虚拟设备就会显示你的react native界面了。
祝贺你,已经安装完成了,如果一切顺利的话,你应该需要花一整天时间,23333……
下一篇文章可以不那么繁琐,而且顺利的话只需要2个小时的时间,而且相比Android Studio运行更快,不那么卡