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

关注

原创最新推荐文章于 2026-06-19 08:49:08 发布 4.9k 阅读 AI 写同款· GEO 优化 ›

react-native-android-unity（一）react-native加入android原生本人是做后端php的，对各类语言和方向都有兴趣，多而不精。最近公司项目有一个移动端app，决定采用react-native开发，项目中有这么个要求，要求react-native中嵌入原生页面，然后原生页面嵌入unity，并实现原生和unity之前相互通信，网络查找资料后实现这些功能，查找过程中，遇到很多问题，并且参照了很多网友的博客，在此做一个记录，以防后患。开发环境及工具： mac... 阅读详情

使用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
打开插件列表