React-Native入门指导-Mac系统Android环境配置

参考文档ReactNative中文网

1.安装Java环境
假如我们之前配置好过iOS环境的话，就直接从Android Studio开始配置。注意，Android配置会比iOS稍微麻烦一些。

终端运行

javac -version

Android Studio需要Java Development Kit [JDK] 1.8（暂不支持更高版本）。看看你的JDK版本是否合适

2.安装Android Studio
Android Studio下载地址

安装Android Studio3.0 正式版

Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。

3.安装过程中有一些需要改动的选项：

选择Custom选项：

勾选Performance和Android Virtual Device

安装完成后，在Android Studio的启动欢迎界面中选择Configure | SDK Manager。

经过长时间的下载，我们终于能打开了

在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。

在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1（必须是这个版本）。然后还要勾选最底部的Android Support Repository.

4.ANDROID_HOME环境变量

确保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

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

5.安装安卓的模拟器
首先安装VirtualBox-5.0.6-103037-OSX
再安装genymotion-2.5.2
链接:https://pan.baidu.com/s/1iClY7dvdlMGoB90yeYpeKA 密码:jtyz

链接:https://pan.baidu.com/s/1z-gTB54DoSekZ91xbiQ9Ag 密码:w9dh

6.打开终端 初始化第一个RN项目
提前cd到你需要创建代码的地方

react-native init HelloWorld

7.打开Android Studio

进去之后，就可以去吃饭洗澡了，第一次加载会非常慢，且自动下载JDK

管理RN的版本

查看版本

$react-native -v (进入你的项目,查看的就是你项目的版本)

更新项目版本 npm(Node Package Manager)

$npm update -g react-native

查询网上RN最新的版本

$npm info react-native

升级或者降级RN 版本

$npm install –save react-native@0.XX.X

安装插件

Mac下安装

提示： 如果没有templets 文件夹，你可以手动创建一个

webstorm11安装路径

将ReactNative.xml复制到 ~/Library/Preferences/WebStorm11/templates

webstorm2016.2安装路径

将ReactNative.xml复制到 ~/Library/Preferences/WebStorm2016.2/templates

重启 WebStrom

真机调试

1.配置IP
找到 RCTWebSocketExecutor.m 里面的 localhost 给为你的电脑的IP地址
2.修改Bundle ID : 不改很有可能报错!
3.Test 的Team也需要设置

安装插件

ReactNative-LiveTemplate-master

链接:https://pan.baidu.com/s/14CWHdLBcPE3UjnpzgH-9Ww 密码:uhgc

readme安装使用文档

# 更新日志

[2016-11-09]

本插件可以配合 `react-native.d.ts` 以及 `react.d.ts` 使用，
webstorm -> language & frameworks -> javascript -> Libraries 

点击【download】按钮，找到 react.d.ts 和 react-native.d.ts 下载, 大功告成！

[2015-12-25]

新增组件属性,调用ReactNative组件时, 首先 按下 `command + J` , 然后输入属性名的 `首字母` 如输入`onP` 自动提示 `onPress, onPressIn, onPressOut, .....`

# 说明
ReactNative的代码模板,包括:

1. 组件名称
2. Api 名称
3. 所有StyleSheets属性
4. 组件属性 [2015-12-25]新增

# 安装

### 方法一

`file` -> `import settings` -> `ReactNative.jar`

### 方法二

Mac下安装

> 提示： 如果没有`templets` 文件夹，你可以手动创建一个

#### webstorm11安装路径
将`ReactNative.xml`复制到 `~/Library/Preferences/WebStorm11/templates`

#### webstorm2016.2安装路径
将`ReactNative.xml`复制到 `~/Library/Preferences/WebStorm2016.2/templates`

重启 WebStrom

# 使用方法
### 通用方法
直接输入`组件` 或 `Api` 名称的`首字母`, 比如想要 `View` ,只要输入 `V`自动提示代码里就会看到 `View`

### StyleSheet属性提示

首先 按下 `command + J` , 然后输入属性名的 `首字母`

如: 输入 `f` ,会自动提示 fontSize,fontFamily,fontStyle...等等