react native 0.84 环境搭建

首先安装 homebrew, xcode,android studio

参考了 # 2025最终!Mac配置Flutter全平台开发环境完整指南(亲测有效)

css 复制代码
brew install flutter

flutter doctor
flutter --disable-analytics

brew install watchman

npx react-native doctor

ios

csharp 复制代码
# 设置命令行工具路径
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

# 首次配置
sudo xcodebuild -runFirstLaunch

# 接受许可
sudo xcodebuild -license accept

升级 ruby

bash 复制代码
brew install ruby
# 配置 PATH(让系统优先用新版) 
vim ~/.zshrc 
# 添加这两行(注意版本号可能不一样,看你装的版本) 
# update ruby

export PATH="/opt/homebrew/opt/ruby/bin:$PATH"

export PATH="/opt/homebrew/lib/ruby/gems/4.0.0/bin:$PATH"

export LDFLAGS="-L/opt/homebrew/opt/ruby/lib"

export CPPFLAGS="-I/opt/homebrew/opt/ruby/include"

# 保存并生效 
source ~/.zshrc 
# 验证(应该显示 4.x 版本) 
ruby -v

Ruby 升级好后,CocoaPods 就能装了

sql 复制代码
sudo gem install cocoapods
sudo gem update --system 4.0.8

测试 iOS 环境

bash 复制代码
# 打开 iOS 模拟器
open -a Simulator

npx @react-native-community/cli@latest init AwesomeProject

cd AwesomeProject

cd ios && pod install

yarn start
yarn run ios

# 创建测试项目
flutter create my_first_app
cd my_first_app

# 运行
flutter run

android

运行如下命令可知 rn 0.84 所需的 17 < jdk < 20

java 复制代码
npx react-native doctor

sdk 是 sdkman 提供的能力: # mac 使用 sdkman 管理多版本jdk

php 复制代码
sdk install java 17.0.18.fx-zulu
sdk default java 17.0.18.fx-zulu
sdk use java 17.0.18.fx-zulu

android standard 安装有几个依赖是没有安装的

在 Android Studio 里:

  1. 打开 SettingsAppearance & BehaviorSystem SettingsAndroid SDK

  2. 切到 SDK Tools 标签

  3. 勾选这几个:

    • Android SDK Command-line Tools
    • Android SDK Platform-Tools
    • Android SDK Build-Tools
  4. Apply 等下载完成

bash 复制代码
vim ~/.zshrc 
# 添加这些(路径根据你的实际情况调整) 
export ANDROID_HOME=$HOME/Library/Android/sdk 
export PATH=$PATH:$ANDROID_HOME/emulator 
export PATH=$PATH:$ANDROID_HOME/platform-tools 
export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin 
source ~/.zshrc

flutter doctor --android-licenses

其实到这里 flutter 和 rn 的环境应该都能跑起来。 rn 这里并没有使用 expo

相关推荐
想你依然心痛2 小时前
【共创季稿事节】HarmonyOS 7.0 应用框架(ArkUI-X)跨平台能力深度探索
flutter·react native·arkui-x·跨平台渲染·harmonyos 7.0·arkrender·组件兼容性
大龄秃头程序员9 小时前
RN 新架构 Bridgeless 模式下原生向 RN 发事件:一次踩坑与复盘
react native
大龄秃头程序员12 小时前
React Native 0.86 新架构实战:Fabric 原生组件开发的 4 个致命坑
react native
光影少年1 天前
RN适配方案:屏幕适配、分辨率适配、刘海屏/全面屏适配
react native·react.js·掘金·金石计划
墨狂之逸才1 天前
React Native 设备唯一 ID:MediaDrm + Keychain 实战
react native
光影少年2 天前
RN中的StyleSheet.create 好处、内联样式弊端
react native·react.js·掘金·金石计划
大龄秃头程序员3 天前
RN 0.86 新架构实战:TurboModule + Fabric 组件 + iOS 原生容器,完整代码开源
前端·react native
光影少年3 天前
RN 样式特点:Flex 布局默认、没有像素单位、样式不能级联
react native·react.js·掘金·金石计划
青枣八神3 天前
Expo如何只通过数据线连接手机的Expo go
react native·智能手机·安卓