使用WebStorm 开发React Native Android APP的配置

本教程可以帮助你对WebStorm 进行配置,适用于开发React Native app

• 1:安装
• 2:环境配置
• 3:安装插件
• 4:Enjoy it

安装

1:安装nodejs 与NPM
从以下链接下载Nodejs 并安装
https://nodejs.org/en/

2:安装WebStorm
从以下链接下载WebStorm 下载并安装
http://www.jetbrains.com/webstorm/

3:Android SDK下载
使用Android Studio 进行下载

环境配置

1: npm 的安装目录设置

//配置npm安装目录
npm config set prefix "x:\Program Files\nodejs\node_global"
//配置npm cache 目录
npm config set cache "x:\Program Files\nodejs\node_cache"

运行下面的命令安装React Native cli工具

npm install -g react-native-cli

2:系统环境变量
在系统的PATH变量中添加
x:\Program Files\nodejs\node_global
和
nodejs 的安装路径
例如
C:\Program Files\nodejs\

3:Android SDK 环境变量配置
添加一条名为ANDROID_HOME 的环境变量
变量值为: Android SDK的安装目录

安装插件

1:打开WebStorm,选择File->settings-> Languages & Frameworks->JavaScript,选择JavaScript language version为 React JSX

2:选择File->settings-> Languages & Frameworks->JavaScript->Libraries,点击Download 按钮,安装react 与 react-native两个库

3:下载React Native智能提示插件
插件GITHUB地址
下载完毕后,解压zip 文件,提取其中ReactNative.jar文件至
C:\Users\用户名\.WebStorm2017.3\plugins中即可
然后打开WebStorm 点击 file -> import settings -> ReactNative.jar

4:下载React Native Console 插件
1:打开WebStorm,选择File->settings-> Plugins

2:点击Browse repositories... 输入React native console 即可查询到插件

3:安装成功后,在原来的console位会增加一个RN Console

4:RN console 可以有很多功能.例如调试 logcat 等

Enjoy it

至此,WebStorm的插件以及环境配置就配置完成了~