React-Native入门指导-Mac系统Android环境配置
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 aaa@qq.com
安装插件
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...等等