React Native 环境搭建

2,288 阅读3分钟

参考文章:React Native中文网

由于一直做android原生开发,所以jdk,android sdk,还有它们的windows path环境变量配置就不多说了。

这里有几个需要注意的点:

  • jdk要是1.8或者更高版本
  • sdk版本里必须要有android6.0,就是Android SDK Build-Tools 23.0.1版,这是因为React Native就是在这个版本编译的,但是这并不意味React Native app只能运行在android 6.0的机器上,只是在这个版本进行编译,另外React Native app支持最低版本android4.1
  • 设置ANDROID_HOME环境变量,就是sdk的安装地址,然后再把%ANDROID_HOME%和%ANDROID_HOME%\tools加到path环境变量中

ok,接下来进入正题

React Native中文网中第一个安装的就是Chocolatey,安装方式是在windows命令指示符中直接输入:
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

但是没有安装成功,说是需要翻墙,但是我科学上网依然出错,实在是搞不定,只好放弃,不过安不安装Chocolatey其实关系不大,这个软件其实只是为了方便后面其他软件的安装,对于React Native的开发环境是没有作用的,Chocolatey相当于一个应用市场,可以方便我们以命令行的方式直接安装软件。

假如Chocolatey安装成功了,那就按React Native中文网的下一步继续

安装Python

打开命令提示符窗口,使用Chocolatey来安装Python 2.

注意目前不支持Python 3版本。

choco install python2

安装node

打开命令提示符窗口,使用Chocolatey来安装NodeJS.
choco install nodejs.install

安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

安装React Native命令行工具

npm install -g react-native-cli

还有git,Genymotion的安装就不说了。

如果你的Chocolatey跟我一样没有安装成功,那就只能自己去这些软件的官网下载安装咯。

贴心的附上网址Node,Python 2.7.10 (3.0 以上的版本据说不行)点击下载吧!node和Python安装完成后,依然按照上面说的方法安装React Native命令行工具。

到这里环境基本就搭好了,那就赶紧试一试吧

依然是在windows的命令指示符中(其实我觉得PowerShell更好用)

  • 新建一个MyProject工程:
    react-native init AwesomeProject
  • 切换到MyProject目录下:
    cd MyProject
  • 运行packager:
    react-native start

这时可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本(看到很长的js代码就对了)。第一次访问通常需要十几秒,并且在packager的命令行可以看到形如[====]的进度条。

运行模拟器

运行之后,保持packager开启,另外打开一个命令行窗口,然后在工程目录下运行:
react-native run-android
首次运行需要等待一段时间,因为要从网上下载gradle依赖。

运行完毕后可以在模拟器或真机上看到应用自动启动了,后面关于React Native的调试就到React Native中文网看一看吧,建议先看一看视频,虽然是mac上搭建环境,但是调试这部分是与环境没有关系的。