React Native学习日记(一)完全零基础环境搭建MacOS+Android

最近打算学习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

  

猜你喜欢

转载自www.cnblogs.com/darkforest/p/9669579.html