react-native开发环境

学习交流：https://gitee.com/potato512/Learn_ReactNative

react-native学习交流QQ群：806870562

RN(React-Native)-通俗的说就是跨平台开发吧，一套代码可以在安卓和ios上运行，针对ios而言其本质是对ios原生控件的一次封装，然后通过js调用相关函数，视图等。

学习网站

ES6 教程：http://es6.ruanyifeng.com/

ReactJS 教程：http://huziketang.com/books/react/

React Native中文网：https://reactnative.cn

react-native github：https://facebook.github.io/react-native/docs/getting-started.html

Native热更新：http://update.reactnative.cn/home

开发工具：webStorm（https://www.jetbrains.com）

激活：在打开的 License Activation 窗口中选择 License server；在输入框输入网址 http://idea.codebeta.cn；点击确定即可。

配置环境（iOS与Android配置相同）

注意：在mac电脑上进行开发。

首先安装Homebrew（https://brew.sh）

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

1、安装Node.js

（1）安装 

brew install node

（2）镜像配置 

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

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

2、安装Yarn

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

项目、运行打包服务（packager）等任务。

（1）安装 

sudo npm install -g yarn react-native-cli

（2）镜像配置

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

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

3、安装Watchman

Watchman是由Facebook提供的监视文件系统变更的工具。

（1）安装 

brew install watchman

4、建议定期运行 brew update && brew upgrade watchman来使您的应用程序保持最新状态。

brew update
brew upgrade watchman

5、安装Xcode开发工具（步骤3前安装）

6、安装AndroidStudio开发工具（https://developer.android.com/sdk/index.html）

（1）先安装JDK（http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html）

（2）AndroidStudio的配置

a）在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Android 

SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 

System Image。

b）在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 

23.0.1（必须是这个版本）。然后还要勾选最底部的Android Support Repository。

c）确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。具体的做法是把下面的命令加入

到"~/.bash_profile"文件中：(译注：~表示用户目录，即/Users/你的用户名/，而小数点开头的文件在Finder中是隐藏的，并且

这个文件有可能并不存在。请在终端下使用"vi ~/.bash_profile"命令创建或编辑。如不熟悉vi操作，请点击这里学习）。如果你的

命令行不是bash，而是例如zsh等其他，请使用对应的配置文件。

// 如果你不是通过Android Studio安装的sdk，则其路径可能不同，请自行确定清楚。
export ANDROID_HOME=~/Library/Android/sdk

然后使用下列命令使其立即生效（否则重启后才生效）"source ~/.bash_profile"。

source ~/.bash_profile

可以使用"echo $ANDROID_HOME"检查此变量是否已正确设置。

echo $ANDROID_HOME

1、创建项目：react-native init 项目名称，如：

react-native init helloWorld

2、运行iOS项目（进入项目目录执行）：react-native run-ios

react-native run-ios

3、运行Android项目（进入项目目录执行）：react-native run-android

react-native run-android

4、或是启动Node服务器：react-native start

react-native start