最近打算学习React Native,正好手头有台Mac电脑,于是选了MacOS+Android。照着官方文档来安装环境,遇到了不少麻烦,一一解决后,记录下来。
这里是中文版本的官方文档链接 https://reactnative.cn/docs/getting-started/
操作时可以参考文档一步一步来,此文仅记录下来过程的困难和心得。实际上主要是没有接触过MacOS系统,也没接触过Java,也没接触过Android,真正的完全零基础,所以很吃力。
本人推荐的原则是:千万不要完美主义,完美主义会扼杀你的动力。先能开始,能走下去再说。
本文也是搜索寻找了多个文章,花了几个小时,最后成功的实现了在Android真机上调试React Native程序。
环境搭建 之 自我总结版本:
1、安装Homebrew
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2、安装node 和 watchman
brew install node brew install watchman
3、设置 npm 镜像到淘宝
npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global
4、安装yarn并设置镜像源
npm install -g yarn react-native-cli yarn config set registry https://registry.npm.taobao.org --global yarn config set disturl https://npm.taobao.org/dist --global
5、安装JDK 1.8,切记是1.8 。Oracle官网自己搞,这个真的没必要说了
6、安装Android Studio。建议在此处下载 http://www.android-studio.org/。安装时千万详细看文档,我是一次就OK了,尤其注意,勾中右下角的"Show Package Details"才能看见。
7、此处我搞了很久,因为漏掉了一些配置。配置.bash_profile
~表示用户目录,即/Users/你的用户名/
,而小数点开头的文件在 Finder 中是隐藏的,并且这个文件有可能并不存在。可在终端下使用vi ~/.bash_profile
命令创建或编辑。
export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/platform-tools
source .bash_profile
8、创建新项目
react-native init AwesomeProject
9、配置adb
10、打开安卓手机的USB调试
11、查看手机的硬件信息
system_profiler SPUSBDataType
此处要记住你那只手机的Vendor ID
12、找到这个文件,没有就创建 ~/.android/adb_usb.ini
vi ~/.android/adb_usb.ini
把Vendor ID放入这个文件 :wq 保存即可。
13、大结局要来了:
cd AwesomeProject react-native run-android
此时还有一种悲剧,sdk location not found。
14、local.properties这个文件,从androidStudio根目录中,复制一份local.properties到react-native项目android目录中。如果找不到androidStudio根目录中的local.properties。就在react-native项目android目录中创建一个。
sdk.dir=/Users/xxxxxxx你的用户名/Library/Android/sdk