序:
最近折腾了下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了,你成功搭建好安卓开发环境了