react-native开发Android环境详细配置(mac)

1.mac自带ruby,可输入ruby --version查看版本

2.安装Homebrew

(1)使用命令:ruby-e"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

(2)检查是否安装成功:brew -v

3.安装nodejs,具体安装步骤请看:node安装配置

(1)检查node版本:node -v

(2)装完node会自动有npm,检查npm版本:npm -v

4.安装watchman和flow

(1)安装watchman:brew install watchman

(2)安装flow:brew install flow

(3)定期更新brew:brew update 或者 brew upgrade(开发周期内,最好一天一次)

5.安装Xcode

(1)可直接在app store 中下载(文件较小)

(2)也可网页下载,查找xcode下载(文件较大)

6.安装Android环境

(1)Java环境搭建:

一、下载并安装jdk

jdk下载地址

二、配置java环境变量  

①输入$ /usr/libexec/java_home来定位java在mac中的安装路径

②在命令行中输入:$touch ~/.bash_profile(touch命令是若文件不存在,创建该文件)

③在命令行中输入:$open~/.bash_profile(open用编辑器打开该文件)

④把第一步查找到到java安装路径赋值给JAVA_HOME,复制以下内容到 .bash_profile文件中:

export JAVA_HOME=查找到的java安装路径

export PATH=$JAVA_HOME/bin:$PATH                                  

export CLASS_PATH=$JAVA_HOME/lib:$CLASS_PATH

⑤在命令行中输入:$source~/.bash_profile(source命令是执行文件)

⑥验证环境变量是否成功:在命令行输入      $java 或$javac(若提示命令找不到表示失败)

或输入      $echo$JAVA_HOME(是否能成功打印java的安装路径)

三、Android studio安装

Android studio 下载地址   安装参考

Android studio 安装成功

新版的Android studio mac 会安装最新版本的Android sdk

Android studio创建新项目

写好项目名称后,进入上面的界面,这个页面支持你适配TV、Wear等,我们只选择第一项就ok,选好默认SDK然后”Next”

这里我们选择empty activity即可


创建成功后的页面


四、Android sdk安装

由于安装的sdk是最新的安卓系统,所以为了开发兼容旧的安卓系统,我们还是需要安装sdk

打开Android studio ,点击mac顶部的preference,出现下面界面,

按照开发需要选择勾需要的Android系统选项

五、Android sdk环境变量配置

①与设置Java一样,打开 .bash_profile文件

②打开android studio,打开preference,点击如下图可以查看android sdk对安装路径

③把上步找到的sdk的安装路径赋值给ANDROID_HOME,并复制以下内容到 .bash_profile中

export ANDROID_HOME=查找到到sdk路径

export  PATH=${PATH}:${ANDROID_HOME}/tools

export  PATH=${PATH}:${ANDROID_HOME}/platform-tools

④在命令行中输入:

$source ~/.bash_profile

在命令行中输入:

$adb

(验证android sdk环境变量是否设置成功)


sdk配置成功

7.安装安卓模拟器(本案例选择MuMu模拟器)

模拟器下载地址

②使用安卓模拟器创建一个 Android 的虚拟设备 (AVD)

③运行 android avd 并且点击 Create...

④选定该新的 AVD, 并且点击 Start...

二点击create
三点击new
四然后一直next到finish

①值得一提的是,"Keyboard"选项勾选后可以用计算机键盘输入到AVD中,但此时运行的AVD中不会启动Android中的输入法,取消勾选则会启动Android中的输入法,而无法用键盘输入,设置好后点击"Finish"结束

②启动AVD,按经验第一步打开AVD管理器,可以看到刚才新建的AVD,点击"Actions"下的绿色箭头按钮就可以启动AVD了

8.项目开发

①npm install -g react-native-cli 是完成剩余安装的命令行工具。它是通过npm安装的。这将会在你的终端里面安装 react-native这个命令行

②react-native init AndroidProject这一条命令获取 React Native 的源代码和依赖包

③$cd AndroidProject   

④$react-native run-android

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容