一、React Native 搭建开发环境(1)(Mac OS - IOS项目)

时间:2022-05-23 13:14:22

React Native是Facebook推出的一个开发IOS和安卓APP的技术。至于更多的详情,这里不再描述,大家可以自行百度它的定义。

目的:

由于我想在一台电脑上同时开发IOS和Android两个APP,所以用的Mac。

这里就讲一讲我在搭建开发环境过程中遇到的坑,也为后面学习该技术的道友指一条坑少的路。

1.安装Homebrew

Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。

打开 mac os里的 终端,直接复制粘贴以下命令,回车:

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

(注意:在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到 /usr/local 目录不可写的权限问题。

可以使用此命令修复:sudo chown -R `whoami` /usr/local  )

众所周知,由于国内长城的原因,导致可能有很多国外的资源下载不下来或下载速度超级慢。

于是在安装了Homebrew之后,有必要的童鞋也可以设置一下国内的加速源。

我用的是:http://ban.ninja

a.在Mac OS的 终端 里输入 ~/.bash_profile 会打开这个配置文件;

b.然后在里面加上一行:

export HOMEBREW_BOTTLE_DOMAIN=http://7xkcej.dl1.z0.glb.clouddn.com

c.加了之后,按 ESC 键,退出编辑;

d.然后再输入命令 :wq 保存并退出当前配置文件。

e.让刚才的更改生效:source ~/.bash_profile

f.输入下面两句话,查看刚才更改的环境变量是否生效:

echo HOMEBREW_BOTTLE_DOMAIN 会输出 HOMEBREW_BOTTLE_DOMAIN

$HOMEBREW_BOTTLE_DOMAIN 如果看到 http://7xkcej.dl1.z0.glb.clouddn.com 字样,说明我们刚才的配置已经OK了。

2.安装NodeJS

使用Homebrew来安装Node.js。(如果你的电脑上已经装了NodeJS,只要保证版本在5.0及以上,就不用再次安装。)

React Native目前需要NodeJS 5.0或更高版本。本文发布时Homebrew默认安装的是最新版本,一般都满足要求。

brew install node

安装完node后建议设置npm镜像以加速后面的过程(或使用*工具)。

注意:建议不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别!

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

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

3.安装Yarn、React Native的命令行工具(react-native-cli)

Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。

React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

npm install -g yarn react-native-cli

安装完yarn后同理也要设置镜像源:

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

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

如果你看到 EACCES: permission denied 这样的权限报错,那么请参照上文的homebrew译注,修复 /usr/local 目录的所有权:

sudo chown -R `whoami` /usr/local

安装完yarn之后就可以用yarn代替npm了,例如用yarn代替npm install命令;

用 yarn add 某第三方库名代替 npm install --save 某第三方库名。

注意:目前npm5(发文时最新版本为5.0.4)存在安装新库时会删除其他库的问题,导致项目无法正常运行。

请尽量使用yarn代替npm操作。

4.安装XCode

React Native目前需要Xcode 8.0 或更高版本。你可以通过App Store或是到Apple开发者官网上下载。

这一步骤会同时安装Xcode IDE和Xcode的命令行工具。

虽然一般来说命令行工具都是默认安装了,但你最好还是启动Xcode,并在 Xcode > Preferences > Locations 菜单中检查一下,

是否装有某个版本的Command Line Tools。Xcode的命令行工具中也包含一些必须的工具,比如git等。

5.安装Watchman

Watchman是由Facebook提供的监视文件系统变更的工具。

安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)。

brew install watchman

6.安装开发工具

根据你的喜好,选择安装一款开发工具。

我是搞C#的,自然对微软的工具情有独钟,不过也装了两个工具:VSCode和WebStorm。

除此之外,还有很多其他的工具,比如:Sublime Text、还有Facebook自己出品的Nuclide等等。

7.测试安装

注意:init命令默认会创建最新的版本,而目前最新的 0.45 及以上版本需要下载 boost 库编译。

此库体积庞大,在国内即便FQ也很难下载成功,导致很多人无法正常运行iOS项目,中文网在论坛中提供了这些库的国内下载链接。

如果你嫌麻烦,又没有对新版本的需求,那么可以暂时创建0.44.3的版本。

提示:你可以使用 --version 参数(注意是两个杠)创建指定版本的项目。

例如 react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。

于是这里踩坑来了:

boost编译库百度网盘下载地址:http://pan.baidu.com/s/1kVDUAZ9

下载下来后请放置到 ~/.rncache 目录,比如你可以打开 终端,输入:

cd ~ (进入到用户目录)

mkdir .rncache (创建rncache目录,如果有,就不用创建,再次创建时会提示目录已存在)

cp ~/Downloads/boost_1_63_0.tar.gz ~/.rncache/  (复制下载目录文件地址,然后拷贝到rncache目录下)

........ (复制刚刚下载的其他文件)

全部复制完成后,就可以开始init ReactNative项目

react-native init AwesomeProject

cd AwesomeProject

react-native run-ios

然后经过漫长的等待,编译完成后,虚拟机上会打开一个有个react native字样的页面,说明咱们的IOS开发环境搭建成功了!

提示:如果run-ios无法正常运行,请使用Xcode运行来查看具体错误(run-ios的报错没有任何具体信息)。

你也可以在Nuclide中打开AwesomeProject文件夹 然后运行,或是双击ios/AwesomeProject.xcodeproj文件然后在Xcode中点击Run按钮。

8.修改项目

现在你已经成功运行了项目,我们可以开始尝试动手改一改了:

使用你喜欢的编辑器打开index.ios.js并随便改上几行。

在iOS Emulator中按下⌘+R(保存)就可以刷新APP并看到你的最新修改!

9.完成

恭喜!你已经成功运行并修改了你的第一个React Native应用。