React Native搭建开发环境IOS

2020-11-09 10:26 在思考中成长阅读(433) 评论(0) 收藏举报

Android在搭建上直接看官网就Ok 官网：https://www.reactnative.cn/docs/getting-started

这篇文章只讲解一下 IOS如何搭建react-native

安装依赖

必须安装的依赖有：Node、Watchman、Xcode 和 CocoaPods。

虽然你可以使用任何编辑器来开发应用（编写 js 代码），但你仍然必须安装 Xcode 来获得编译 iOS 应用所需的工具和环境。

Node, Watchman

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

安装 brew /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 注意：DNS设置为8.8.8.8

在命令行中执行下列命令安装（如安装较慢可以尝试阿里云的镜像源 https://developer.aliyun.com/mirror/homebrew）：

brew install node
brew install watchman

如果你已经安装了 Node，请检查其版本是否在 v12 以上。安装完 Node 后建议设置 npm 镜像（淘宝源）以加速后面的过程。

注意：不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！

# 使用nrm工具切换淘宝源
npx nrm use taobao

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

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

mac上安装包管理工具homebrew失败！【Failure while executing； `git clone https://github.com/Homebrew/homebrew-cor】

1.错误代码

Cloning into '/usr/local/Homebrew/Library/Taps/homebrew/homebrew-core'...
fatal: unable to access 'https://github.com/Homebrew/homebrew-core/': LibreSSL SSL_read: SSL_ERROR_SYSCALL, errno 54
Error: Failure while executing; `git clone https://github.com/Homebrew/homebrew-core /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core` exited with 128.
Error: Failure while executing; `/usr/local/bin/brew tap homebrew/core` exited with 1.

换了新mac, homebrew死活装不上，老是卡在这里，试了网上的各种方法都没能成功！

最后在官网的社区里找到了答案！链接

2.具体操作方法，在命令行里执行：

git clone https://github.com/Homebrew/homebrew-core /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core --depth=1

Xcode

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

Xcode 的命令行工具

启动 Xcode，并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode 的命令行工具中包含一些必须的工具，比如git等。

CocoaPods

CocoaPods是用 Ruby 编写的包管理器。从 0.60 版本开始 react native 的 iOS 版本需要使用 CocoaPods 来管理依赖。你可以使用下面的命令来安装 cocoapods。

当然安装可能也不顺利，请尝试FQ或寻找一些国内可用的镜像源。

sudo gem install cocoapods

或者可以使用 brew 来安装

brew install cocoapods(遇到homebrew失败解决后安装cocoapods 不要FQ)


由于 cocoapods 需要FQ使用 所以国内会报错

https://gems.ruby-china.org/源添加失败

更新cocoapods时发现https://gems.ruby-china.org/添加出现404错误。

再次添加:

gem sources -a https://gems.ruby-china.com

添加成功!

最后附上更新cocoapods流程命令语句:

Gem是一个管理Ruby库和程序的标准包，它通过Ruby Gem源来查找、安装、升级和卸载软件包，非常的便捷。

1.查看gem源：gem sources -l

2.删除gem源：

gem sources --remove https://ruby.taobao.org/ (如果有的话)

gem sources --remove https://rubygems.org/ (如果有的话)

3.添加gem国内镜像源：gem sources -a https://gems.ruby-china.com

4.查看gem源是否添加成功：gem sources -l

5.升级cocoapods：sudo gem install -n /usr/local/bin cocoapods

6.查看cocoapods版本：pod --version

创建新项目

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

使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目。这个命令行工具不需要安装，可以直接用 node 自带的npx命令来使用（注意 init 命令默认会创建最新的版本）：

必须要看的注意事项一：0.45 及以上版本需要依赖 boost 等几个很难下载成功的第三方库编译，请务必使用稳定的代理软件并确定其配置对命令行有效。

必须要看的注意事项二：0.60 及以上版本的原生依赖是通过 CocoaPods 集成安装的。CocoaPods 的仓库在国内也很难访问。如果在 CocoaPods 的依赖安装步骤卡很久（命令行停在 Installing CocoaPods dependencies），请务必使用稳定的代理软件并确定其配置对命令行有效。

必须要看的注意事项三：请不要单独使用常见的关键字作为项目名（如 class, native, new, package 等等）。请不要使用与核心模块同名的项目名（如 react, react-native 等）。请不要在目录、文件名中使用中文、空格等特殊符号。

npx react-native init AwesomeProject

提示：你可以使用--version参数（注意是两个杠）创建指定版本的项目。例如npx react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。

如果你是想把 React Native 集成到现有的原生项目中，则步骤完全不同，请参考集成到现有原生应用。

编译并运行 React Native 应用

在你的项目目录中运行yarn ios或者yarn react-native run-ios：

cd AwesomeProject
yarn ios
# 或者
yarn react-native run-ios

提示：如果此命令无法正常运行，请使用 Xcode 运行来查看具体错误（run-ios 的报错没有任何具体信息）。注意 0.60 版本之后的主项目文件是.xcworkspace，不是.xcodeproj！

很快就应该能看到 iOS 模拟器自动启动并运行你的项目。

'React/RCTBridgeDelegate.h' file not found

拿到别人写的一个react-native demo，版本0.60.4的。react-native run-ios 的时候报错 'React/RCTBridgeDelegate.h' file not found。然后各种百度，在Xcode上一顿猛操作,结果都不管用。找了好久，最后得到一个解决方案，记录如下！

切换到react-native项目的根目录下：

cd /ios
	pod install
	cd ..
	react-native run-ios

这样报错就解决了，如果没有其他错误，项目就可以跑起来啦！

刷新页面返回顶部

在思考中成长