React Native-ios环境的搭建

要在mac系统上搭建RN环境：

一、安装homebrew。它是一款Mac OS平台下的软件包管理工具。

安装方法：命令行输入

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

但是，此方法一般会因访问外网(github)速度太慢而失败。

因此，我们采用国内的镜像源来安装。

1.获取brew_install文件，即是将以上链接的下载脚本下载到本地文件上。

curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install >> brew_instal

2.修改此文件内容，将

BREW_REPO = "https://github.com/Homebrew/brew".freeze
CORE_TAP_REPO = "https://github.com/Homebrew/homebrew-core".freeze（有的版本不存在）

替换为清华大学的镜像源

BREW_REPO = "https://mirrors.ustc.edu.cn/brew.git".freeze
CORE_TAP_REPO = "https://mirrors.ustc.edu.cn/homebrew-core.git".freeze（不存在就不管）

3.运行脚本

/usr/bin/ruby brew_install

若长时间停止执行，并出现

==> Tapping homebrew/core
Cloning into '/usr/local/Homebrew/Library/Taps/homebrew/homebrew-core'.

的提示，则执行

git clone git://mirrors.ustc.edu.cn/homebrew-core.git/ /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core --depth=1

最后，通过命令

brew -v

检测是否安装成功。

二、安装node和watchman，用homebrew在命令行进行安装

brew install node
brew install watchman

如果已经安装了Node，请检查其版本是否在 v10 以上。命令行输入

node -v

即可查询安装版本。安装完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

watchman（看门人）是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）。

三、安装yarn和react-native-cli。

yarn是Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。React Native 的命令行工具(react-native-cli)用于执行创建、初始化、更新项目、运行打包服务（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

安装完yarn之后就可以用yarn代替npm了，例如用yarn代替npm install命令，用yarn add某第三方库名代替npm install某第三方库名。

四、安装xcode，xcode为IDE。

五、创建新项目，先试下创建0.44.3（低版本的）的应用。

react-native init MyApp --version 0.44.3

然后进入应用

cd MyApp

用xcode打开MyApp的ios文件夹

启动模拟器(simulator),出现如下报错。

此时，修改node_modules/react-native/React/Base/RCTModuleMethod.m文件，在RCTParseUnused方法中增加一行

static BOOL RCTParseUnused(const char **input)
{
  return RCTReadString(input, "__unused") ||
         RCTReadString(input, "__attribute__((__unused__))") ||     //lyh fixed
         RCTReadString(input, "__attribute__((unused))");
}

重新启动模拟器即可。

六、创建高版本应用

运行

react-native init AwesomeProject

注意：init 命令默认会创建最新的版本，而目前最新的 0.45 及以上版本需要下载 boost 等几个第三方库编译。

这些库在国内即便翻墙也很难下载成功，导致很多人 无法运行iOS项目！这是这些库的国内下载链接。

安装成功即可运行init命令。

React Native-ios环境的搭建

猜你喜欢