亲测React Native(v0.72)之macOS环境搭建

React Native ( 简称 RN ) 是 Facebook 于2015年4月开源的跨平台移动应用开发框架,是 Facebook 早先开源的 JS 框架 React 在原生移动应用平台的衍生产物,支持 iOS 和 Android 两大平台。RN 使用Javascript 语言,因此熟悉 Web 前端开发的技术人员,只需很少的学习就可以进入移动应用开发领域。

注意

  • 在 Windows 下,只能搭建开发安卓应用的环境。而不能搭建开发苹果应用的环境
  • 在 Mac 下,既可以搭建安卓应用的环境,又可以搭建开发苹果应用的环境

Node.js安装

下载Node:nodejs.org/en

安装之后可以切换国内的npm镜像源使用nrm配置

已经安装了 Node,请检查其版本是否在 v16 以上。

Yarn安装

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

js 复制代码
npm install -g yarn

Watchman

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

推荐使用Homebrew来安装 Watchman。

js 复制代码
brew install watchman

Xcode

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

CocoaPods

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

js 复制代码
brew install cocoapods

macOS默认ruby版本:

可能会出现的问题:

了解了一下之后,CocoaPods这个东西是基于ruby gem的,换源:

js 复制代码
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
gem sources -l

创建工程

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

js 复制代码
npm uninstall -g react-native-cli @react-native-community/cli

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

js 复制代码
npx react-native@latest init AwesomeProject

不要在目录、文件名中使用中文、空格等特殊符号。请不要单独使用常见的关键字作为项目名(如 class, native, new, package 等等)。请不要使用与核心模块同名的项目名(如 react, react-native 等)。

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

js 复制代码
cd AwesomeProject
yarn ios
# 或者
yarn react-native run-ios

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

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

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

在正常编译完成后,开发期间请保持Metro命令行窗口运行而不要关闭。以后需要再次运行项目时,如果没有修改过 ios 目录中的任何文件,则只需单独启动yarn start命令。如果对 ios 目录中任何文件有修改,则需要再次运行yarn ios命令完成原生部分的编译。

参考资料

  1. www.react-native.cn/docs/enviro...
  2. blog.csdn.net/qq_41391628...
  3. blog.csdn.net/weixin_4522...
  4. blog.csdn.net/PianZhideNa...
相关推荐
游戏开发爱好者812 小时前
iOS 推送怎么配置,APNs 推送证书、设备库与群发
android·ios·小程序·https·uni-app·iphone·webview
光影少年12 小时前
react离线缓存、图片缓存方案
开发语言·前端·javascript·react native·react.js·缓存·前端框架
Anhty1 天前
2026 实测 4 款 AI 变声器|QQ 聊天伪装声线,告别僵硬假声
人工智能·功能测试·ios·智能手机·安卓
唔661 天前
flutter web iOS 在浏览器加载中文慢的问题
前端·flutter·ios
ZacJi2 天前
我为 DeepSeek Harness 写了一个 dsh-apple-mode 插件
ios·deepseek·vibecoding
2501_915921432 天前
抓包鹰 Traceeagle 解除证书绑定,SSL Pinning 解除
网络·网络协议·网络安全·ios·adb·https·ssl
光影少年2 天前
react navite本地存储:AsyncStorage、MMKV、文件存储
前端·react native·react.js
梦想的颜色2 天前
AI 时代小白 VibeCoding 做 APP:UniApp(含 Uni‑X)、Flutter 与 React Native+Expo全维度技术选型对比指南
flutter·react native·app·uniapp·vibecoding·unippx·app产品
AI砖家2 天前
React Native 开发规范与完整流程指南
javascript·react native·react.js
人月神话Lee2 天前
我做了个不要账号、不要定位权限的旅行 App,聊聊那些「不做」的决定
ios·ai编程·产品