MacOS下搭建ReactNative环境

最新推荐文章于 2025-06-10 09:18:45 发布

c12f20

最新推荐文章于 2025-06-10 09:18:45 发布

阅读量567

点赞数 22

CC 4.0 BY-SA版权

分类专栏： ReactNative 文章标签： macos react native

本文链接：https://blog.youkuaiyun.com/c12f20/article/details/147726938

ReactNative 专栏收录该内容

1 篇文章

订阅专栏

1. 安装brew (可能提示安装Git)

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

按提示操作即可

2. 安装nvm (nodejs环境管理器)

2.1 使用brew安装

brew install nvm

2.2 配置nvm

创建nvm仓库所在目录mkdir ~/.nvm
在~/.zshrc里加入如下脚本

export NVM_DIR="$HOME/.nvm"
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"  # This loads nvm
[ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

3. 安装node

3.1 安装

nvm install --lts

3.2 配置淘宝源

npx nrm use taobao

如果出现下载失败，可以先手动配置淘宝下载源：

npm config set registry https://registry.npmmirror.com

4. 安装watchman

brew install watchman

5. 安装Yarn（可选）

npm intall -g yarn

6. For iOS开发

6.1 安装Xcode

直接通过AppStore安装即可

6.2 安装cocoapods

brew install cocoapods

6.2.1 手动更换CoacoPods的源

cd ~/.cocoapods/repos
pod repo remove master
git clone https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git master

在每个项目中创建的Podfile文件的第一行添加如下这行（对于脚手架reactive-native-cli来说一般是项目目录下的ios目录）

source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'

pod install --verbose --no-repo-update

后续如需更新可以使用命令

pod update --verbose --no-repo-update

7. For Android开发

7.1 安装Android Studio并配置好Android SDK和Android Emulator

去官网下载Android Studio安装包进行安装，这里不再赘述

7.2 安装Zulu OpenJDK

brew install --cask zulu@17

7.3 配置Android环境变量

编辑～/.zshrc，在其中添加如下脚本

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

7.4 增速gradle下载

修改Android项目(比如：reactive-native-cli创建项目下的android目录)中的gradle/wrapper/gradle-wrapper.properties文件，修改下载地址
https://services.gradle.org/distributions/gradle-8.10.2-all.zip
为
https://mirrors.cloud.tencent.com/gradle/gradle-8.10.2-all.zip

8. 安装脚手架reactive-native-cli并建立一个空项目

npx @react-native-community/cli init AwesomeProject

注意：如果出错，建议删除～/.npm目录，并确保使用了taobao源，即重新执行3.2
进入项目目录AwesomeProject
启动iOS App，键入

yarn ios

或者

yarn react-native run-ios

注意：如此时出现EMFILE错误，可能是前面下载操作造成打开过多句柄，可以使用命令

yarn cache clean

来清除一下再试，如果还不行，建议重建npm环境，即删除~/.npm目录，重新执行步骤3.2，并重启PC。另外，建议启动App时使用yarn react-native start，然后再按提示启动模拟器。这样启动的成功率会高一点。

9. 启动Android App

键入

yarn android

或者

yarn react-native run-android

注意：第一次运行会使用gradle构建项目下载必须的库文件，会比较耗时。其它问题和iOS App类似。

10. 验证环境

修改App.tsx中的function App()。修改其返回的JSX为

    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <Header />
      <View>
         <Text>Hello World!</Text>
      </View>
    </SafeAreaView>

可以看见手机上的界面自动更新成我们修改的内容了

参考文章
Reactive Native中文网 - 环境搭建
https://reactnative.cn/docs/environment-setup
CocoaPods下载很慢的解决办法
https://www.jianshu.com/p/d3467cbc73d6