前言

前文React Native开发之——Webstorm快捷开发介绍了使用Webstorm快捷开发React Native，
本文介绍Webstorm开发RN配置。

Webstorm开发RN配置

配置文件编码格式

注：为避免莫名其妙的问题，本文所使用的编码格式统一设置为”UTF-8”，如图所示Setting->Editor->File Encodings有三处修改，统一改为”UTF-8”。

设置.js文件默认以jsx的语法打开

设置方法，File->Default Settings->Languages&Frameworks->JavaScript->Flow

设置.js文件中支持react-native语法高亮

设置方法，File->Settings->Languages&Frameworks->JavaScript->Libraries->Download
在列表中找到react和react-native，Download and Install, 如红框选中,点击OK。

设置后，如下图：

设置React Native智能提示

github有一个开源的插件：ReactNative-LiveTemplate，当输入时有提示效果。
ReactNative的代码模板，包括：

组件名称
Api 名称
所有StyleSheets属性
组件属性新增

安装

方法一由于ReactNative.jar更新不方便而且过于陈旧，强烈建议使用方法二进行安装，ReactNative.jar 也会删除

file -> import settings -> ReactNative.jar

点击OK后，重启Webstorm生效。

验证是否成功

如下图，当输入style时会有联想提示信息

至此，Webstorm的配置已基本完成。

如果您觉得我的文章对您有用，请随意赞赏！

React Native开发之——Webstorm开发RN配置相关推荐

《React Native跨平台移动应用开发》PDF电子书分享
链接: https://pan.baidu.com/s/14r6xZPJ0u1mrZejEuV8RrA 密码: pqan 分享<React Native跨平台移动应用开发>PDF电子书,本 ...
React Native Android原生模块开发实战|教程|心得|怎样创建React Native Android原生模块...
尊重版权,未经授权不得转载本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告诉大家一个好消息. ...
React Native for Arcgis 地图开发 LocationCtrl （十五）
定位工具封装和使用 LocationCtrl import React, {useState, useEffect} from 'react'; import {View, Text, ScrollV ...
React Native for Arcgis 地图开发聚合图Cluster （十一）
ClusterLayerCtrl 聚合图层调用封装 import React, {useEffect, useState} from 'react'; import {ScrollView, Styl ...
从零学React Native之05混合开发
本篇文章,我们主要讨论如何实现Android平台的混合开发. RN给Android端发送消息首先打开Android Studio, Open工程, 在React Native项目目录下选择andro ...
2020年React Native使用Ant Design Mobile RN组件
Ant Design Mobile RN是一个很优秀的React Native 界面库,可以帮助我们简单方便的开发出漂亮的界面.我在基于0.63版本使用的过程中遇到一些小波折,比如字体无法正常,各种红 ...
webstorm 运行android,Windows React Native环境搭建:webstorm+android studio 及解决热更新
工具准备: SDK Android SDK Build-tools:23.0.1 SDK Platform:Android N .6.0 .5.1.1.5.0.1.4.4.2.4.1.2 Androi ...
前端开发利器webStorm 3.0配置使用
2019独角兽企业重金招聘Python工程师标准>>> 合适的工具会事半功倍,当然也得把握分寸,要不就成了会得越多干的越多的"苦力者". 编辑类软件层出不群,各有 ...
关于react native code push的JS端配置攻略
1. 引用CodePush高阶组件,应用在项目根组件中: import CodePush from "react-native-code-push";class App exten ...

React Native开发之——Webstorm开发RN配置

前言