配置React-Native开发工具——WebStorm下载、激活与配置
目录
- 目录
- 正文
- 为什么推荐WebStorm
- 还有哪些IDE开发工具可以选择
- 安装WebStorm
- 1 下载WebStorm
- 2 安装步骤以Windows操作系统为例
- 3 启动与激活WebStorm
- 4 打开项目
- 配置WebStorm
- 1 添加npm配置
- 2 设置JSX语法
- 3 配置React Native智能提示
正文
通过React-Native开发环境搭建一节完成了开发环境的搭建，那么我们在做React-Native开发的时候都会用到哪些开发工具呢？在这里强烈推荐大家使用WebStorm和Android Studio/XCode来协同完成React-Native应用开发。
1.为什么推荐WebStorm
WebStorm是JetBrains公司旗下的一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。
我们选择WebStorm另外一个原因是，新版本的WebStorm已经全面支持了RN。
2.还有哪些IDE开发工具可以选择
除了WebStorm以外，大家一般还会使用Sublime，Atom等等开发工具，但是根据网友的反馈这些工具都有一个共同的缺点：不能实时编译。关于开发工具大家有什么疑问欢迎在评论区讨论。
3.安装WebStorm
3.1 下载WebStorm
点击WebStorm下载传送门进入官方网站下载页面，选择对应的操作系统，点击下载按钮即可（请参考下图）。
3.2 安装步骤（以Windows操作系统为例）
3.3 启动与激活WebStorm
启动WebStorm，会看到设置提示框：
在新版本中会出现License Agreement提示框，按下图操作即可：
接下来会出现激活提示框：最新版本的激活方法，请参考：最新激活方法【如果您比较有钱，强烈建议您购买正版。】
如果当前的最新版本网上没有激活方法，可以使用以下链接下载2017.2.2版本：
下载链接: https://pan.baidu.com/s/1mjiBMAW 密码: i74p
2017.2.2版本激活方法：
在激活提示框中选择“license server”，输入：http://idea.imsxm.com/，点击激活即可。3.4 打开项目
WebStorm激活成功后会进入到启动页面，点击“Open”按钮打开React-Native项目
选择React-Native项目所在的目录
项目成功后进入工作台（初次运行可能会比较慢）
4.配置WebStorm
4.1 添加npm配置
在打开的项目中，可以看到右上角的运行按钮是灰色的，需要按照以下的步骤添加npm配置
4.2 设置JSX语法
设置方法：File -> Settings -> Language & Frameworks -> JavaScript
添加React-Native的相关库
设置路径：File -> Settings -> Language & Frameworks -> JavaScript -> Libraries
4.3 配置React Native智能提示
我们在是WebStorm开发React-Native时，会发现缺少React-Native框架的关键字只能提示，有个大神写了一个开源插件，完美的解决了这个问题。
插件的Github地址：https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
下载方法：git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
安装方法：File -> Import Settings -> 选择ReactNative.jar
重启WebStorm后，直接输入组件 或 Api 名称的首字母, 比如想要 View ,只要输入 V自动提示代码里就会看到 View
StyleSheet属性提示
首先 按下 Ctrl + J （macOs：Command + J） , 然后输入属性名的 首字母
如: 输入 f ,会自动提示 fontSize,fontStyle
配置React-Native开发工具——WebStorm下载、激活与配置相关推荐
- React Native开发之——Webstorm开发RN配置
前言 前文React Native开发之--Webstorm快捷开发介绍了使用Webstorm快捷开发React Native, 本文介绍Webstorm开发RN配置. Webstorm开发RN配置 ...
- windows 下配置 react native 开发环境
windows 下配置 react native 开发环境 安装nvm 由于react native 需要使用 NodeJs 4.0以上版本,为了方便切换NodeJs,首先我们需要安装nvm. 你可以 ...
- iOS新知识学习之React Native开发工具集
本文整理了React Native iOS开发过程中有用的工具.服务.测试.库以及网站等. 工具 你可以选择不同的开发环境:DECO.EXPO或者你可以使用Nuclide+Atom,目前我使用EXPO ...
- 前端开发工具WebStorm下载
WebStorm下载: 链接:https://pan.baidu.com/s/11wqoB-1xsX0S92DjKQhV9Q 提取码:obdi 复制这段内容后打开百度网盘手机App,操作更方便哦–来自 ...
- React Native开发(一)
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 关于React Native各种疑难杂症,问题深坑总结方案请点击查看: Mac ...
- React Native开发错误警告处理总结（已解决 ！持续更新）
注:本文是我在开发过程中遇到问题解决方法的总结,之后会持续更新,希望帮助到更多的学习者.文中有不妥的地方希望指出共同学习,同时欢迎大神补充.(之后我会放出自己开发整理的笔记和GithubDemo地址, ...
- Windows环境下安装React Native开发环境----记一次填坑过程
前言 集成React Native开发环境遇到各个坑,调试了很久出现过找不到设备,百度上个别人的资料有误被绕来绕去耽误了很多时间,下载慢等待时间过长等问题,最后多方查阅资料,电脑重启等操作终于部署好了 ...
- 在windows上搭建React Native开发环境
最近要学习React Native,但是在window上搭建开发环境的时候遇到了些问题,以至于一直没有搭建好开发环境. React Native相关项目及文档: react-native的GitHub ...
- React Native开发之必备React基础
为了帮助大家快速上手React Native开发,在这本节中将向大家介绍开发React Native所需要的一些React必备基础知识. 概述 本节课将从React的特点.如何使用React.JSX语 ...
- win10下JDK环境变量配置与IDEA开发工具清晰简洁步骤，迈出Java学习第一步
文章目录 一.JDK下载 二.win10下环境变量配置 三.开发工具IDEA安装 一.JDK下载 可以直接去官网下载,推荐下载JDK8.0版本 也可以这个网盘里面找一下下载:Windows下JDK8. ...
最新文章
- win10网络邻居看到linux,在Deepin 20系统中网络共享Windows无法访问的另类解决方法...
- Unity2D游戏开发基础教程1.2项目、资源和场景
- 7-29 修理牧场 (25 分)
- 练习. SQL--选修课程练习
- laravel 缓存相关常用操作
- java switch原则_Java switch case语句
- 清空数据库中的某个表中数据
- python 多figure subplot 水平线 legend
- mac 安装 brew 镜像
- BCB中利用剪贴板复制粘贴
- [音频处理]傅里叶变换去噪
- Dreamweaver构建Blog全程实录
- MySQL讲义第49讲——select 查询之查询练习（七）：使用多种方法添加排名
- strut2下载文件
- 服务器支持 TLS Client-initiated 重协商攻击(CVE-2011-1473复现验证)
- 开源工具：5个优秀的音频编辑器
- 简单几步搞定Mac电脑快速返回桌面的操作！
- hdu1201 18岁生日(java版本)
- FCPX：镜头故障抖动效果TOBK TWITCH for Mac
- 激光测距仪的发展与介绍——TFN 10K KI 双目远距离激光测距仪