ReactNative开发环境搭建

2019-01-17  本文已影响38人  怀念小兔

ReactNative依赖Python、NodeJS、Java等环境,无论在哪个系统下我们都要先安装环境再安装RN本身。这部分本来以为网上教程一搜一大把没必要记录,但按照RN中文网教程安装第一步就踩了坑,所以还是决定记录一下。

windows部分

首先是安装npm,为什么要安装这个?这是一个javascript世界的包管理工具,相当于android开发中的gradle,java ee环境中常用的maven。使用它可以通过一行命令完成很多复杂的操作,这会节省我们很多时间,也能避免一些错误的发生。
npm是nodejs自带的,去nodejs官网下载一个windows版本的安装包安装即可。
npm安装完成之后,通过命令npm -v可以查看版本,如果能正常看到版本就说明安装成功了。然后我们需要设置镜像。如果不设置镜像,我们使用npm下载依赖的时候,就会去默认的官方服务器下载,而它在境外,由于种种原因下载难度较高,某些资源可能无法访问,也容易中断。
按照中文网的教程,设置镜像的命令如下

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

在命令提示符下执行这两个语句,镜像就设置完毕了。接下来安装yarn,yarn是facebook官方出的替代npm的工具,它的功能跟npm类似,我们安装它最主要的原因是RN的脚手架会用到它,所以如果觉得npm够用不安装它是不行的,除非你不用RN脚手架。
安装yarn的命令如下:

npm install -g yarn react-native-cli

接下来安装RN本身:

npm install -g react-native-cli

等等,这是什么鬼?报错了?


安装报错

根据报错的信息,很容易得出镜像失效的结论,那我们换个镜像就好了,百度搜索npm国内镜像,经尝试,下面这个好用:

npm config set registry http://r.cnpmjs.org/ --global
npm config set disturl http://cnpmjs.org/ --global

设置完毕后,就可以正常安装RN了,安装完毕后,我们用RN脚手架搭建第一个项目,首先,在命令提示符下切换到想要存放RN项目的目录,然后输入命令:

react-native init 你的项目名

执行这行命令后,你会发现脚手架使用yarn下载了你缺失的依赖,执行完毕后,我们看到RN项目已经成功创建了:


项目创建成功

至此,windows下的RN环境搭建完毕。android开发环境安装十分简单,这里就不赘述了。

Mac部分

mac环境需要先安装homebrew,这是一个mac系统中的包管理工具,我们需要用它来安装node,homebrew使用以下命令安装:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

实际上它是用ruby来安装的,ruby在mac上都是预安装过的,我们就不需要考虑了。
安装完之后,我们用它来安装node:

brew install node

然后设置一下国内镜像以便加快下载速度:

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

然后就是yarn和RN:

npm install -g yarn react-native-cli

安装成功后,我们就可以用RN脚手架创建项目了。

上一篇下一篇

猜你喜欢

热点阅读