一、React Native 环境搭建

一、React Native 环境搭建

Mac OS With IOS 环境搭建

Node & Watchman#

Brew配置镜像源https://segmentfault.com/a/1190000037670483

brew install node
brew install watchman

Yarn#

npm install -g yarn

Watchman#

参照Watchman 的安装说明来从源码来编译和安装 Watchman。

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

Xcode#

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

Xcode 的命令行工具#

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

在 Xcode 中安装 iOS 模拟器#

安装模拟器只需打开 Xcode > Preferences… 菜单,然后选择 Components 选项,即可看到各种可供安装的不同的 iOS 版本的模拟器。

CocoaPods#

CocoaPods是用 Ruby 编写的包管理器(可以理解为针对 iOS 的 npm)。从 0.60 版本开始 react native 的 iOS 版本需要使用 CocoaPods 来管理依赖。你可以使用下面的命令来安装 CocoaPods。CocoaPods的版本需要 1.10 以上。

sudo gem install cocoapods

或者可以使用 brew 来安装

brew install cocoapods

创建新项目#

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

npx react-native init AwesomeProject

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

CocalPods问题解决方案

error Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template.
Please try again manually: "cd ./AwesomeProject/ios && pod install".
解决办法

执行 cd ./AwesomeProject/ios && pod install

如果遇到[!] Error installing fmt问题可以尝试多执行几次pod install来解决。

**注意:**pod install命令会混用curl命令和git命令,建议单独为curl和git命令配置代理。

curl代理配置:https://zhuanlan.zhihu.com/p/58690128

git代理配置:https://blog.csdn.net/qq_29364417/article/details/85940097

编译并运行 React Native 应用#

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

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

此命令会对项目的原生部分进行编译,同时在另外一个命令行中启动Metro服务对 js 代码进行实时打包处理(类似 webpack)。Metro服务也可以使用yarn start命令单独启动。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值