欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-30 20:57:34
...

参考文档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 正式版
React-Native入门指导-Mac系统Android环境配置

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

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

选择Custom选项:

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

勾选PerformanceAndroid Virtual Device

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

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

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

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

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

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

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

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

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检查此变量是否已正确设置。

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

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

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

进去之后,就可以去吃饭洗澡了,第一次加载会非常慢,且自动下载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...等等
相关标签: ReactNative