0
点赞
收藏
分享

微信扫一扫

React-native Android 环境搭建


React-native Android环境搭建.md

目录

基础安装

安装Homebrew

Homebrew是Mac OSX的包管理器,我们需要通过Homebrew安装开发React Native的相关软件包。 如果不知道怎样安装Homebrew可以点这里: ​​官网​​ 。根据官网的介绍安装即可。

安装Node.js

$ brew install node

安装watchman

watchman是Facebook用于监视JavaScript文件改动的开源项目。

$ brew install watchman

安装flow

flow是Facebook开源的一个JavaScript静态类型检查器,用于发现JavaScript程序中的类型错误。

$ brew install flow

安装react-native-cli

react-native-cli是React Native的命令行工具,安装react-native-cli后我们就能够通过react-native相关命令管理ReactNative工程。

$ npm install -g react-native-cli

iOS环境安装

相对于Android环境搭建,iOS简单太多了,太easy了!在基础环境安装成功之后,只需去 ​​Mac App Store​​ 下载Xcode,并安装Xcode即可。在初始化项目好之后,只需在项目根目录运行下面命令即可:

$ react-native run-android`

Android环境安装

在Android环境,比较难搞,按照步骤安装即可,不要放过任何步骤哦。

基础软件安装

  1. 安装JDK​​jdk-8u101-macosx-x64.dmg​​
  • 查看版本,命令行中运行​​javac -version​
  • 勾选​​Performance​​​ 和​​Android Virtual Device​
  • 安装相关​​SDK Platforms​​​ ,记得勾选​​Show Package Details​
  • 安装​​SDK Tools​​​ 必须是这个版本​​Android SDK Build-Tools 23.0.1​​​ ,记得勾选​​Show Package Details​​ 。
  • ANDROID_HOME环境变量设置。(见下面 环境变量配置)方法
  1. 安装​​免费VirtualBox虚拟机​​
  2. 安装模拟器​​Genymotion​​
  • 注册帐号
  • 下载Genymotion
  • 安装Genymotion

环境变量配置

你可以把 ​​Android SDK​​​ 的 ​​tools​​​ 和 ​​platform-tools​​​ 目录添加到PATH变量中,以便在终端中运行一些Android工具,例如 ​​android avd​​​ 或是 ​​adb logcat​​ 等。

在 ​​~/.bash_profile​​​ 中添加(如果你安装的 ZSH 则在 ​​~/.zshrc​​ 中添加):

PATH="~/Library/Android/sdk/tools:~/Library/Android/sdk/platform-tools:${PATH}" export PATH export ANDROID_HOME=~/Library/Android/sdk

改完需要运行 ​​source ~/.bash_profile​​ (注意:你的SDK的具体路径可能不同)

测试服务端

这时候可以用浏览器访问

​​http://localhost:8081/index.android.bundle?platform=android​​

如果可以访问表示服务器端已经可以了。

启动步骤

启动 Genymotion 设置

在应用中登录,点击按钮 ​​Add​​​ 下载模拟器设备,在 ​​Setting​​​ 中设置 ​​ADB​​​ 选择 ​​User custom Android SDK tools.​​​ 填写地址,一般在目录 ​​/Users/用户名/Library/Android/sdk​​​ 中,点击按钮 ​​Start​​ 启动模拟器


React-native Android 环境搭建_搭建开发环境

React-native Android 环境搭建_搭建开发环境_02

React-native Android 环境搭建_android环境_03

运行命令启动项目

进入项目的根目录,也就是有 ​​package.json​​​ 文件的目录,运行 ​​react-native run-android​​ 启动项目,如下动图:


React-native Android 环境搭建_搭建开发环境_04

报错

在Android环境下运行,会报下面错误,原因是没有连接手机会报如下错, 开发阶段可忽视

error: no devices/emulators found Could not run adb reverse: Command failed: ~/Library/Android/sdk/platform-tools/adb reverse tcp:8081 tcp:8081

参考资料

  • ​​官方搭建开发环境​​
  • ​​reactnative.cn搭建开发环境​​
  • ​​极客学院搭建开发环境​​

举报

相关推荐

0 条评论