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选项:

这里写图片描述

勾选PerformanceAndroid Virtual Device

这里写图片描述

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

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

这里写图片描述

在SDK Platforms窗口中,选择Show Package Details,然后在Android 6.0 (Marshmallow)中勾选Google APIsAndroid SDK Platform 23Intel x86 Atom System ImageIntel 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...等等
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wtdask/article/details/80666584
文章标签: ReactNative
个人分类: React-Native
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭