当前位置： 首页>后端>正文

react-native 在 mac 系统上搭建Android 和 ios 开发环境

后端2024-05-01 16:30:23

参考官网

Ios 环境安装的依赖有：Homebrew、Node、Watchman、Yarn、Xcode、CocoaPods
Android 环境安装的依赖有： Node、JDK、Android Studio、Android SDK、Android Virtual Device 手机模拟器
以下的 ios 环境搭建操作建议开启代理，否则极易失败

一、安装 Homebrew

Homebrew是Mac系统的软件包管理工具，拥有安装、卸载、更新、查看、搜索等功能

  1. 下载安装
    中途等待需要点击回车继续下载，等待最后下载完
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  1. 常用命令
1. brew -v                       // 查看brew版本 
2. brew update                   // 更新brew版本 

3. brew install 软件包名          // 安装依赖 
4. brew uninstall 软件包名        // 卸载依赖 
5. brew list                     // 查看已安装的所有包 
6. brew install 软件包名          // 查看已安装的单个包 
7. brew search 软件包名           // 查看软件包的可用版本

二、安装 Node

  1. 安装 Node
    node 版本要求 v16 以上的偶数号版本，也可用NVM管理node版本
brew install node@16
  1. 查看安装后的 Node 版本
node -v

三、安装 watchman

Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能，在react Native中使用 Watchman 来检测您何时进行了代码更改，然后自动构建并将更新推送到您的设备，可加快加载速度

  1. 安装 watchman
brew install watchman
  1. 查看安装后的 Node 版本
node -v

四、配置淘宝镜像、安装 Yarn

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

  1. 配置镜像源
// 使用nrm工具切换淘宝源
npx nrm use taobao

// 如果之后需要切换回官方源可使用
npx nrm use npm
  1. 安装 Yarn
npm install -g yarn
  1. 查看 Yarn 版本
yarn -v

五、安装 CocoaPods

CocoaPods是用 Ruby 编写的包管理器（可以理解为针对 iOS 的 npm）。从 0.60 版本开始 react native 的 iOS 版本需要使用 CocoaPods 来管理依赖

  1. 安装
brew install cocoapods

//或者
sudo gem install cocoapods
  1. 常用命令
pod --version    // 查看版本
pod init         // 初始化 Podfile 文件
vim Podfile      // 编辑 Podfile 文件
pod install      // 安装依赖
pod repo update  // 更新 cocoapods 列表

六、安装 Xcode

Xcode是开发ios的IDEA，我们在 AppStore 中搜索并安装，安装成功后需要指定路径

// 修改 xcode 路径
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer/

七、安装 JDK

  1. 查看电脑系统架构
// 日志最后的单词就是当前系统，如果最后是 X86_64 ，则代表系统是 X64 架构
uname -a
  1. JDK 下载地址
    下载前选择对应的系统架构
// JDK版本要求 v11 版本，低于 0.67 版本的 React Native 需要 JDK 1.8 版本（官方也称 java 8 版本）。

// JDK 11
https://www.oracle.com/java/technologies/downloads/#java11

// JDK 8
https://www.oracle.com/java/technologies/downloads/#java8
  1. 查看安装后的 JDK 版本
// JDK 11
javac -version;

// JDK 8
java -version;

八、安装配置 Android Studio

1. 下载 Android Studio
// 下载地址
https://developer.android.google.cn/studio?hl=zh-cn
2. 安装 Android Studio
安装到 Install Type 步骤时，选择 Custom --> 下一步，全部勾选 Android SDK、Android SDK Platform、Android Virtual Device
--> 下一步 --> accept --> finish 等待 --> 结束后打开 Android Studio
3. 配置 Android Studio 的 SDK Manager
在 Android Studio 的 Welcome to Android Studio 启动页，点击 more action --> 点击 SDK Manager
-->在 SDK Manager 中选择 SDK Platforms 选项 --> 然后在右下角勾选 Show Package Details --> 勾选 Android 13.0 下的
√ Android SDK Platform 33
√ Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）
--> 选择 SDK Tools 选项卡 --> 然后在右下角勾选 Show Package Details --> 勾选 Android SDK Build-Tools 34 下的
√ 33.0.0
--> 点击 apply  --> ok
4. 配置 Android SDK 的环境变量

React Native 需要通过环境变量来了解 Android SDK 装在什么路径，从而正常进行编译

  1. 查看 Android SDK 的安装路径
在 Android Studio 的 Welcome to Android Studio 启动页，点击 more action --> 点击 SDK Manager
--> 上方的 Android SDK Location 路径就是 Android SDK 的安装路径 --> 拷贝
  1. 配置 Android SDK 的环境变量
// 1. 查看当前使用的shell脚本工具
echo 
九、创建 react-native 项目


// 2. 如果你的 shell 是 zsh，则配置文件为~/.zshrc，如果是 bash 则为~/.bash_profile，把下面的命令加入到 shell 的配置文件中，以 zsh 为例
vi ~/.zshrc

// 3. 将下方代码拷贝到 ~/.zshrc 文件中
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

// 4. 加载 配置文件让环境变量生效
source $HOME/.zshrc

// 5. 保险起见，两个配置文件都加上，以防更改shell时出错
vi ~/.bash_profile

// 6. 将下方代码拷贝到 ~/.bash_profile 文件中
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

// 7. 加载 配置文件让环境变量生效
source $HOME/.bash_profile
  • 如果之前安装过旧版本 react-native 脚手架，需先卸载
      • npm uninstall -g react-native-cli @react-native-community/cli 
  • 创建项目
      • // 创建最新的 react-native 项目 npx react-native@latest init AwesomeProject // 创建指定版本的 react-native 项目 npx react-native@X.XX.X init AwesomeProject --version X.XX.X 
    十、启动 Ios 环境
  • 启动 ClashX 代理，配置 git 的代理网址
      • git config --global http.proxy http://127.0.0.1:7890 git config --global https.proxy http://127.0.0.1:7890 
  • 启动 ios 服务
      • yarn ios 
    十一、启动 Android 环境
    // 注意：镜像路径不是固定的会随时更新，如果加速无效可到 React Native 中文网查看，地址：https://reactnative.cn/docs/environment-setup repositories { google() mavenCentral() maven { url 'https://maven.aliyun.com/repository/public/' } }
    1. 配置国内镜像（不配置会很慢、而且非常容易下载失败）
      打开项目下的 android/build.gradle 文件，修改代码如下
  • 启动 android 服务
      • // 当执行 npm run android 时会自动启动并连接 Android Virtual Device 手机模拟器 yarn android 
    十二、react-native android环境常见异常和处理方式
    Error: Unable to resolve module react-native from
    1. 出现 // 1. 删除 node_modules // 2. 清除缓存，重新安装依赖 npm cache clean --force yarn install yarn android 

    https://www.xamrdz.com/backend/3l91940382.html
    相关文章：