Mac 运行 RN（避坑版）

原创 已于 2023-10-19 11:32:55 修改 · 556 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react native

于 2023-10-19 11:30:40 首次发布
本文详细介绍了在Mac上配置Android和iOS双系统环境，包括JDK（推荐Zulu11）的安装，避免使用brew安装Gradle，处理初始化RN时的CocoaPods依赖安装错误，以及解决找不到SDKVersion的问题。

目录

一、双系统配置（Android & IOS）

一、配置JDK

二、配置gradle

三、初始化 RN 报错（✖ Installing CocoaPods dependencies）

 四、找不到SDK Version found： N/A

一、双系统配置（Android & IOS）

        mac 上创建 RN 项目和 windows 有点不一样的是，它会检查你 android 和 ios 双环境是否配置完毕，如果有一个没有配置好 初始化就会有问题（安装ios的时候没有遇到问题，在这里就不提了）

一、配置JDK

        官网推荐使用 zulu11-jdk（>0.67），并附了 mac 安装指令，但是使用brew 安装的 zulujdk 是21并不是11，所以还是推荐去 zuluJDK 官网下载后再配置环境变量。

export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-11.jdk/Contents/Home
PATH=$JAVA_HOME/bin:$PATH
export PATH 
export CLASSPATH

二、配置gradle

        不要使用 brew 安装 gradle，brew 默认安装的是最新的gradle（我使用brew安装的是 8.5版本），所以咱们还是老老实实的去官网下载。

        如果 jdk 版本和 gradle 版本不对应的话会报下面这样的错：

Exception in thread “main“ java.util.zip.ZipException: zip file is empty

这是 不同版本 JDK 对应的 gradle 版本，我下载的是 gradle 5.6.3。

三、初始化 RN 报错（✖ Installing CocoaPods dependencies）

        修改hosts

使用该链接查看 github 的IP https://www.ipaddress.com/ip-lookup

然后将该IP 添加到hosts 文件中

 四、找不到SDK Version found： N/A

        使用以下步骤即可解决：

        1、SDK Command line tools version 33.

export PATH=$PATH:$ANDROID_HOME/cmdline-tools/10.0/bin

        2、在 Android Studio 中安装 SDK Command-line Tools

        3、删除 .gradle 中的文件

/Users/YourName/.gradle 

        4、重启 RN 项目

        所有问题都解决啦～

原创 macbook RN 环境搭建（实测心得）
lllomh的博客
12-13 1420
如果你已经安装了 Ruby 3.2.2 并希望在你的开发环境中使用最新版本的 Ruby，你可以使用 Ruby 版本管理工具来管理不同版本的 Ruby，并设置默认使用最新版本。可能会触发错误，因为这是使用的默认的自带的ruby版本，虽然文件模板被创建了，会报错，后期也无法运行起来。设置全局 Ruby 版本： 使用以下命令将全局 Ruby 版本设置为 3.2。重新启动终端： 安装完 rvm 后，需要重新启动终端窗口。这里的依赖除了 Watchman 都是必须安装的，mac设置 ruby版本。
MAC下网易MuMu模拟器调试ReactNative
YooHoeh的博客
02-25 4397
疫情原因得在家远程办公，在MAC下开发RN的时候发现了一个平台兼容问题，手里头没有安卓设备，只能用模拟器，AS avd、genymotion笨重还慢，后来发现了网易mumu这个小东西，又小又快。自己捣鼓了一天终于在模拟器上运行上了，这里记录过程。 调试前准备 JAVA环境 ADB环境（可以在终端运行adb命令） node环境 下载并安装好网易MuMu模拟器 1. 运行网易MuMu,打开后在...
Mac平台搭建RN开发环境
小炫风技术旅行
10-10 2680
1.安装 Node, Watchman 官方参考 brew install node brew install watchman 如果出现出现 brew install node command not found bash 下执行 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/maste...
Mac RN环境搭建
qq_33715850的博客
08-14 1721
Mac RN环境搭建
Mac 安装RN android开发环境
angliliu2521的博客
02-13 357
前言 前面介绍了MAC 安装,再来讲讲mac 安装 安卓的开发环境 首先貌似很多Mac自带安卓JDK ，你可以在终端上输入java -version 看是否已经有java开发环境。 如果没有java开发环境，需要到官网下载java-jdk；然后配置系统变量。 一、使用命令行来配置 1.请安装JDK1.8 ，下载地址Oracle官方：http://www.oracle.c...
RN8302Bspi通讯例程RN8302B-RN8302spi通讯例程
06-23
RN8302B是一款广泛应用于工业控制领域的通讯模块，它支持多种通讯协议，其中spi通讯协议是其支持的主要通讯方式之一。spi通讯，全称Serial Peripheral Interface，是一种高速的全双工通讯接口，常用于微控制器和各种...
FinClip RN 运行环境，让小程序在 RN 应用中无缝运行 _ ReactNative DEMO for FinC
最新发布
09-15
FinClip RN 运行环境是一种能够在ReactNative应用中无缝运行小程序的技术解决方案。通过这种技术，开发者可以在ReactNative框架下直接嵌入和运行小程序，这对于需要在同一应用中整合不同功能模块的场景尤其有用。小...
RN8209D.zip_RN8209D_RN8209协议_RN8209资料_rn8209_校表
07-14
RN8209D是一款高性能的蓝牙低功耗（Bluetooth Low Energy, BLE）无线通信模块，广泛应用于物联网、智能家居、健康监护等领域。该模块由瑞昱半导体（Realtek Semiconductor）制造，具有高集成度和易用性。在这个名为...
RN2026支持软件_RN2026手册_RN2026_buriedcnh_RN2026支持软件_rn2026芯片
09-10
RN2026是一款专为物联网(IoT)设计的无线微控制器，具有强大的功能和灵活性，广泛应用于智能家居、工业自动化、健康监测等场景。这款芯片由Microchip Technology Inc.制造，提供了一套完整的硬件和软件解决方案，以...
Mac 环境现有项目集成 RN环境
qq_17864717的博客
07-29 702
开发环境：mac rn版本：0.62.2 xcode版本：11.6 一、集成cocopods 参考文档：https://www.jianshu.com/p/6d51362b7e64 1.查看当前Ruby版本 ruby -v 2.升级Ruby环境，首先需要安装rvm（如果有就直接跳到第5步） curl -L get.rvm.io | bash -s stable source ~/.bashrc source ~/.bash_profile 3.查看rvm版本 显示如下 rvm .
RN在Mac上搭建开发环境入坑小解
chenzimin_blog
09-11 552
目前公司项目的功能模块比较多，新增更新模块比较多，用原生开发项目，会比较消耗人力物力。考虑到某些模块可以实现双端统一，共用一套框架。因此个人想花点时间调研了解下RN的应用。 首先是严格按照RN安装配置步骤去安装一些插件。下面是记录我在安装的时候碰到的一些坑： 问题一 根据步骤，创建首页Demo： npx react-native init AwesomeProject 报错： ... 225 timing npm Completed in 608786ms 226 error cb() never cal
RN在Mac环境下开发环境搭建
weixin_30814319的博客
11-21 720
1.推荐使用Homebrew来安装 Node 和 Watchman。在命令行中执行下列命令安装： brew install node brew install watchman 如果你已经安装了 Node，请检查其版本是否在 v8.3 以上。安装完 Node 后建议设置 npm 镜像以加速后面的过程（或使用***工具）。 注意：不要使用 cnpm！cnpm 安装的模块路径比较奇怪，...
M1芯片Mac搭建RN环境注意事项
wayne214的博客
04-22 891
【代码】M1芯片Mac搭建RN环境注意事项。
更新：在MAC上安装RN开发环境的步骤（全）
weixin_30776545的博客
04-08 275
总共分为三部： 1:按照官网（中文）上的步骤去安装jdk和android studio 2:配置SDK 3:安装虚拟机和模拟器 所以这里提出的是注意事项： 1:~/.bash_profile文件里面的内容： PATH="~/Library/Android/sdk/tools:~/Library/Android/sdk/platform-tools:${PATH}"export PAT...
mac安装rn的android环境
weixin_45625609的博客
03-08 3427
1 当前电脑信息：MacBook Pro (13-inch, 2017, Two Thunderbolt 3 ports) 处理器：2.3 GHz 双核Intel Core i5 2 打开rn的英文文档： https://reactnative.dev/docs/environment-setup. 中文文档： https://www.react-native.cn/docs/environment-setup.中英文文档还是有点区别 3 按照文档我们一步步往下操作 3-1 下载Android-Studio
RN 环境搭建之Mac 下配置步骤
qq_30519365的博客
01-24 1324
RN 环境搭建之Mac 下配置步骤（windows 下一样的道理）： 1.安装必需的软件 Homebrew Homebrew, Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件（Mac 控制台）。 /usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/mast
React Native 在Android设备上运行应用
qq_37558903的博客
12-29 409
1.在设备上运行应用 a.USB数据线连接设备调试： 在已经打开设备的 USB 调试开关的情况下，运行项目时找不到设备，重启设备之后试试。 b.Wi-Fi链接设备调试： 注意： 确保电脑和设备在同一个Wi-Fi环境下 设备也要打开USB调试 默认端口（设备上有你要运行的应用） 在设备上运行要调试的应用，此时会报错或者Reload之后报错Could not connect to devel...
Mac上搭建React Native Android开发环境并运行
小崔的博客
10-17 3129
react-native目前是越来越火，很多人都开始接触，环境搭建就显得比较重要，具体方法可以看一下这两篇文章 1、mac上搭建步骤 2、Mac OSX 安装nvm（node.js版本管理器）在执行命令 需要使用vpn，才能安装成功，国内网络受限。nvm install node最后执行命令npm install -g react-native-cli执行命令 可以创建工程 这个过程是比较慢re
mac 下 运行 rn 项目
07-02
<think>我们正在处理用户的问题："我想在macOS系统下运行 ReactNative项目请问howto runreact nativeproject onmac"根据用户提供的引用内容，我们可以总结出在macOS上运行ReactNative项目的步骤和可能遇到的问题。用户引用的内容主要涉及：引用[1]：创建新项目的位置引用[2]：ReactNative提供了命令行工具来在iOS和Android模拟器/设备上运行应用引用[3]：在iOS上运行ReactNative应用时可能遇到的CoreSimulatorService错误引用[4]：用户初次使用React Native遇到的问题，包括使用Expo创建项目时遇到的错误因此，我们将指导用户如何在macOS上运行一个React Native项目，包括两种方式：1.使用Expo（更简单，适合初学者）2.使用React NativeCLI（需要配置Xcode和AndroidStudio环境）由于用户问题中没有指定使用哪种方式，我们将分别介绍两种方式的基本步骤。注意：用户的环境是macOS，因此我们重点介绍iOS模拟器的运行，但也会提及Android。步骤概览：方式一：使用Expo1.安装Node.js和Expo CLI2.创建新项目3.启动项目并在Expo Go应用中查看（或使用模拟器）方式二：使用ReactNative CLI（需要配置开发环境）1.安装Node.js、Watchman（推荐）、Xcode（用于iOS开发）、AndroidStudio（用于Android开发）2.创建新项目3.运行iOS应用（使用Xcode模拟器）或Android应用（使用Android模拟器）根据引用[4]，用户可能在使用Expo时遇到问题，因此我们也会提供一些常见问题的解决方法。由于用户之前可能已经创建了项目，我们也会说明如何运行已有的项目。详细步骤：</think>### 在 macOS 上运行 React Native 项目的完整指南 #### 一、环境准备 1. **安装 Node.js 和 npm** 推荐使用 Homebrew 安装： ```bash brew install node brew install watchman # 文件监控工具 ``` 2. **安装 Java Development Kit (JDK)** ```bash brew install --cask adoptopenjdk/openjdk/adoptopenjdk11 ``` 3. **安装 iOS 开发依赖** - 通过 App Store 安装最新版 Xcode - 安装 Xcode 命令行工具： ```bash xcode-select --install ``` 4. **安装 Android 开发依赖** - 安装 [Android Studio](https://developer.android.com/studio) - 配置环境变量（添加到 `~/.zshrc` 或 `~/.bashrc`）： ```bash export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools ``` #### 二、创建/启动项目 ##### 方法 1：使用 React Native CLI ```bash # 安装 CLI npm install -g react-native-cli # 创建新项目 npx react-native init ProjectName # 启动 iOS 模拟器 cd ProjectName npx react-native run-ios # 启动 Android 模拟器 npx react-native run-android ``` ##### 方法 2：使用 Expo（更简单） ```bash # 安装 Expo CLI npm install -g expo-cli # 创建项目 expo init ProjectName # 启动开发服务器 cd ProjectName expo start ``` 用 Expo Go App（App Store 下载）扫描终端显示的二维码即可预览 #### 三、常见问题解决 1. **CoreSimulatorService 错误** 引用[3]中的错误通常需重置模拟器服务： ```bash sudo killall -9 com.apple.CoreSimulator.CoreSimulatorService rm -rf ~/Library/Developer/CoreSimulator/Devices ``` 2. **Android 设备未识别** 确保已启用 USB 调试： - 在开发者选项中打开 "USB debugging" - 检查设备连接状态： ```bash adb devices ``` 3. **端口冲突** 若 Metro Bundler 无法启动（默认端口 8081）： ```bash sudo lsof -i :8081 # 查看占用进程 kill -9 <PID> # 结束进程 ``` #### 四、调试技巧 - **iOS 调试**： `Cmd+D` 打开开发者菜单 → 启用 "Remote Debugging" - **Android 调试**： `Cmd+M` 打开开发者菜单 → 选择 "Debug" - **日志查看**： ```bash npx react-native log-ios npx react-native log-android ``` > 引用[2]：React Native 提供了命令行工具在 iOS/Android 模拟器或真机上运行应用，关键在于正确配置开发环境[^2]。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值