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->
新建AVD

新建AVD

新建AVD

新建AVD

新建AVD

运行AVD

图片描述

运行导入的工程文件

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

工具栏

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

运行结果

ios开发

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

本文固定链接: http://www.js-code.com/android/android_55340.html