React Native简介及开发环境配置

React Native简介

React Native是Facebook 在2015 大会上推出的基于 JavaScript 的开源框架。React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。开发者只需学习一种语言就能轻易为任何平台高效地编写代码。React Native着力于提高多平台开发的开发效率 —— 仅需学习一次，编写任何平台(Learn once, write anywhere)

开发环境配置

安装Homebrew

Homebrew：Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。

打开终端输入

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

如果遇到相关权限问题。执行下面命令修复

sudo chown -R `whoami` /usr/local

安装Node.js

brew install node

设置npm镜像

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

Yarn、React Native的命令行工具（react-native-cli）

Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务等任务。

npm install -g yarn react-native-cli

安装完yarn后同理也要设置镜像源：

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

如果遇到相关权限问题。执行下面命令修复

sudo chown -R `whoami` /usr/local

安装Android Studio 和Genymotion、Git

React Native目前需要Android Studio2.0或更高版本。
Java Development Kit [JDK] 1.8或更高版本
配置ANDROID_HOME环境变量
export ANDROID_HOME=~/Library/Android/sdk
将Android SDK的Tools目录添加到PATH变量中
这个就不多说了，给出我的mac的环境变量配置

这里写图片描述

Watchman

Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能

brew install watchman

Flow

Flow是一个静态的JS类型检查工具

brew install flow

安装React Native开发工具WebStorm

还有其他很多开发工具，建议使用WebStorm，WebStorm和Android studio有很多相似的地方，上手会很快，网上有破解版，自行破解安装

这里写图片描述

测试安装

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

或者用开发工具直接新建React Native应用

注：以上内容来自React Native中文网，安装过程中可能会出现各种各样的问题，不要着急，一步一步来，遇到问题找google或者直接百度。

在Android模拟器上及Xcode模拟器上的运行截图

运行过程中可能会出现8081端口被占用的情况
在终端中输入

//查看8081端口占用情况：lsof -i tcp:8081
//去除占用：kill pid（具体数字）

Android模拟器：

这里写图片描述

iOS设备：

这里写图片描述