React Native苹果系统搭建开发环境

758 阅读1分钟

安装依赖

必须安装的依赖有:Node、Watchman 和 Xcode。 虽然你可以使用任何编辑器来开发应用(编写 js 代码),但你仍然必须安装 Xcode 来获得编译 iOS 应用所需的工具和环境。

macOS系统安装Node和 Watchman

我们推荐使用Homebrew来安装 Node 和 Watchman。

1.苹果mac终端执行命令安装Homebrew

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

2.在命令行中执行下列命令安装Node和 Watchman:

brew install node brew install watchman

3.如果你已经安装了 Node,请检查其版本是否在 v10 以上。安装完 Node 后建议设置 npm 镜像(淘宝源)以加速后面的过程(或使用科学上网工具)。

# 使用nrm工具切换淘宝源

npx nrm use taobao

# 如果之后需要切换回官方源可使用

npx nrm use npm

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

Yarn

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

npm install -g yarn

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

Xcode

React Native 目前需要Xcode10 或更高版本。你可以通过 App Store 或是到Apple 开发者官网上下载。这一步骤会同时安装 Xcode IDE、Xcode 的命令行工具和 iOS 模拟器。

Xcode 的命令行工具

启动 Xcode,在桌面左上角点击Xcode,选择Preferences 点击 Locations 菜单中检查一下是否装有某个版本的Command Line Tools,如果没有或者选择不上,卸载重新安装

创建新项目

如果你之前全局安装过旧的react-native-cli命令行工具,请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突。

创建项目命令

npx react-native init AwesomeProject

下载 React-Native IOS 运行依赖

#进入项目目录
cd AwesomeProject
#下载依赖
node_modules/react-native/scripts/ios-install-third-party.sh
#下载完成后查看还需要下载的依赖
cat node_modules/react-native/scripts/ios-install-third-party.sh

#输出如下:
#!/bin/bash
 多余的东西不显示
fetch_and_unpack glog-0.3.5.tar.gz https://github.com/google/glog/archive/v0.3.5.tar.gz 61067502c5f9769d111ea1ee3f74e6ddf0a5f9cc "\"$SCRIPTDIR/ios-configure-glog.sh\""
fetch_and_unpack double-conversion-1.1.6.tar.gz https://github.com/google/double-conversion/archive/v1.1.6.tar.gz 1c7d88afde3aaeb97bb652776c627b49e132e8e0
fetch_and_unpack boost_1_63_0.tar.gz https://github.com/react-native-community/boost-for-react-native/releases/download/v1.63.0-0/boost_1_63_0.tar.gz c3f57e1d22a995e608983effbb752b54b6eab741
fetch_and_unpack folly-2018.10.22.00.tar.gz https://github.com/facebook/folly/archive/v2018.10.22.00.tar.gz f70a75bfeb394363d2049a846bba118ffb3b368a

四个下载链接是关键,使用工具下载这四个文件。下载链接与 React-Native 版本紧密关联,请仔细查看文件版本。 下载完成后,新建文件夹 .rncache,将下载的四个文件移入到目录下

#进入根目录
cd
#新建文件夹 .rncache
mkdir ~/.rncache
#进入 .rncache目录
cd .rncache
#进入 .rncache目录
open .
#吧下载好的依赖环境拖进去

#再次运行安装脚本,因为使用本地下载文件,所有运行起来很快。
node_modules/react-native/scripts/ios-install-third-party.sh
#运行项目就可以跑起来了
yarn react-native run-ios