react-native之android环境搭建

react-native之android环境搭建

本文基于OSX Yosemite 10.10.4

所需软件环境

• Homebrew

• Node

• react-native-cli

• java

• Android Studio

• Watchman

• Flow

参考react native 中文搭建环境文档

注意事项

1. 在安装Android Studio的过程中选择custom方式安装，此时可以安装android sdk，严格按照react native 中文搭建环境文档中Android Studio部分所需的SDK Platforms和SDK Tools来安装，注意Android SDK Build-Tools 一定是23.0.1版本的。

创建react-native项目

$ react-native init hellowReact

以上命令很多情况下很久都没有响应，可以把npm源替换成国内npm镜像，比如说taobaonpm镜像等，改变npm源有多种方式:

# 方式一: 在~/.npmrc文件的末尾加上下面两句
registry=https://registry.npm.taobao.org/
disturl=https://npm.taobao.org/dist
# 方式二: 命令
$ npm config set registry https://registry.npm.taobao.org
$ npm config set disturl https://npm.taobao.org/dist

此时，在当前目录下生成了一个新的项目名为helloReact，项目目录结构如下所示:

目录结构

• android android应用

• ios ios应用

• index.android.js android的js入口

• index.ios.js ios的js入口

• package.json 项目的配置

• node_modules 项目依赖的npm包

android开发

使用安装好的android studio 软件导入上一步创建好项目helloReact的android目录

新建avd(其实就是一个android模拟器)

工具栏-> AVD Manager->

运行导入的工程文件

Gradle编译好过后就可以运行了

在模拟器上安装app并且运行

ios开发

使用xcode打开新建项目helloReact的ios目录下的hellowReact.xcodeproj文件，点击运行即可在模拟器中查看结果