mac上react-native搭建安卓开发环境

发布于2023-05-16 00:52:17字数2

序：

最近折腾了下react-native的开发环境搭建，照着react-native官网搭发现问题多多，为了让其他人少走点弯路就写了这篇文章。

依赖

这个提前先安装好

brew install node  //已经有node了就不用再执行这条了，不过需要node@14以上版本
brew install watchman
npm install -g yarn //可以不装，不过这个我用起来比npm快，装了会快点

//这里的是JDK，react-native@0.71版本需要11版本的JDK，装完可以输入javac -version查看版本
brew tap homebrew/cask-versions
brew install --cask zulu11

安装 Android Studio

安装完上面所有依赖后可以安装 Android Studio了；下载和安装 Android Studio，国内网络有可能打不开这个地址（这个自己想办法吧🤣，我反正是打得开），安装的时候在安装界面中选择"Custom"选项，确保选中了以下几项：

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device

然后往下next就行了。

配置 ANDROID_HOME 环境变量

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。所以现在让我们来设置环境变量。
具体的做法是把下面的命令加入到 shell 的配置文件中。如果你的 shell 是 zsh，则配置文件为~/.zshrc，如果是 bash 则为 ~/.bash_profile（可以使用echo $0命令查看你所使用的 shell。）：

# 如果你不是通过Android Studio安装的sdk，则其路径可能不同，请自行确定清楚
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

译注：~表示用户目录，即/Users/你的用户名/，而小数点开头的文件在 Finder 中是隐藏的，并且这个文件有可能并不存在。可在终端下使用vi ~/.zshrc命令创建或编辑。

创建新项目

ok，我们现在来到最麻烦的地方了，上面👆那些完全可以照着官网一步步来（我也抄了很多🤔️），但是创建项目这部分照着官网的来问题多多，这里的要多注意了。
首先，如果你的电脑之前用的是react-native-cli命令行工具创建react-native项目的，要把它卸载掉了，新版本（我现在的新版本上0.71）不用react-native-cli命令行工具创建项目了，把它卸载掉：

npm uninstall -g react-native-cli @react-native-community/cli

然后使用npx创建项目：

npx react-native init myApp

哦豁！别执行上面那条命令哦，不过执行了也没事，就是你会等很久，然后发现各种报错。
我们来执行这一条命令：

npx react-native init myApp --skip-install

稍微等一下，然后出现这个：

项目创建好啦，完结撒花🎉

骗你的🤪，当然还没有。这个时候我们只是创建好了项目，但是距离打开模拟器或连接真机开发还有段路，不过也快了。
cd进入项目，执行yarn安装

cd myApp
yarn install  //不想装yarn也可以使用npm安装：npm install

通过Android Studio打开模拟器

这个容易点，打开Android Studio，找到project—》open打开我们创建的项目，找到android目录（别直接打开根目录哟，要找到项目根目录下的android目录）。接下来如果事首次从Android Studio中打开项目，慢慢等把，Android Studio右下角有下载依赖进度可以看，等到都下载安装好了，在Android Studio上面：

可以找到已经安装的模拟器，或者使用usb连接电脑后的真机，点击旁边的run（就是那个三角形播放icon的那个），然后就开始跑模拟器了。

最后执行：

yarn android  或 npm android

然后等待执行完成就能在模拟器中看到welcome了，ok了，你成功搭建好安卓开发环境了

评论

back top