最新！MacOS react-native 双平台开发环境配置（Android+ios）

今天药忘吃喽~ 2023-07-16 03:39 4阅读 0赞

> 主要参考：[react-native官方文档][react-native]  
> 加入了一些自己操作过程中遇到的问题

### 目录 ###

*   *  基本配置（Android和ios都要有的）
     *  开发运行Android的环境配置
     *  开发和运行ios的环境配置
     *  配置完成！创建项目
     *  注意点

## 基本配置（Android和ios都要有的） ##

**nodejs**（必备）：直接官网下载安装  
**watchman**是由Facebook提供的监视文件系统变更的工具，安装此工具可以提高开发时的性能

没有Homebrew则先安装Homebrew  
*注意安装失败有可能是没有翻墙的原因，MacOS需要**命令行翻墙***

brew install node
    brew install watchman

**yarn**是Facebook提供的替代npm的工具，可以加速node模块的下载，安装yarn之后，就可以勇yarn来代替npm

npm install -g yarn

***接下来是android和ios不一样的部分，两个平台同时开发，则两个环境都需要配置***

## 开发运行Android的环境配置 ##

**javac**，没有则需要安装jdk，**坑点：注意版本**！！**注意版本**！！**注意版本**！！react-native需要 Java Development Kit \[JDK\] 1.8（暂不支持 1.9 及更高版本）（[macOS安装sdk的博文][macOS_sdk]）（附上原文档里jdk1.8的链接：[jdk1.8][]）

javac -version

**安装Android Studio**  
在官网下载安装  
一直下一步直到安装成功  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx_size_16_color_FFFFFF_t_70]  
**安装Android SDK**  
Android Studio 的**欢迎界面**中找到 SDK Manager。点击"**Configure**"，然后就能看到 **SDK Manager**

（SDK Manager 还可以在 Android Studio 的"`Preferences`"菜单中找到。具体路径是`Appearance & Behavior → System Settings → Android SDK`）

在 SDK Manager 中选择"`SDK Platforms`“选项卡，然后在右下角勾选”`Show Package Details`"。展开`Android 9 (Pie)`选项，确保勾选了下面这些组件（重申你必须使用稳定的翻墙工具，否则可能都看不到这个界面）：

*  `Android SDK Platform 28`
 *  `Intel x86 Atom_64 System Image`

然后点击"SDK Tools"选项卡，同样勾中右下角的"**Show Package Details**"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的28.0.3版本。你可以同时安装多个其他版本。

最后点击"Apply"来下载和安装这些组件。

**配置ANDROID\_HOME环境变量**  
添加命令到 bash\_profile (自行搜索了解vim的用法)

vim ./bash_profile

将以下部分添加到文件中  
（第一行里的ANDROID\_HOME是sdk的位置）

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

## 开发和运行ios的环境配置 ##

**Xcode**  
React Native 目前需要Xcode 10 或更高版本。在app store 下载安装即可。  
安装Xcode的过程中会安装 Xcode IDE、Xcode 的命令行工具和 iOS 模拟器。

**Xcode 的命令行工具**  
启动 Xcode，并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode 的命令行工具中包含一些必须的工具，比如git等。

## 配置完成！创建项目 ##

创建项目这一步，尤其要注意翻墙（注意mac要终端代理），不然可能会导致一些资源下载失败

react-native init Demo

cd Demo
    react-native run-ios
    react-native run-android

## 注意点 ##

**报错**  
run-android如果报下面的错误，那么可能是配置环境有错误，最好检查一下，sdk的环境变量，jdk的版本 等等

BUILD FAILED in 456ms
    
    error Failed to install the app. Make sure you have the Android development environment

大多数报错，认真阅读报错log都能找出错误的原因  
**配置的坑**  
1、masos翻墙，一定要终端翻墙，也就是在terminal里设置  
2、terminal只能设置http代理，无法走https；ping命令无法确认是否走代理了，只能用curl或wget来确认  
3、下载cocoapods慢，可以考虑

brew install cocoapods
    cd ios
    pop install --repo-update

[react-native]: https://reactnative.cn/docs/getting-started/
[macOS_sdk]: https://blog.csdn.net/qq_33466661/article/details/104940708
[jdk1.8]: https://www.oracle.com/java/technologies/javase-jdk8-downloads.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx_size_16_color_FFFFFF_t_70]: /images/20230528/3e22074d933d4df0b4c22392aad90098.png