新建的React Native就遇到vscode报警解除方法

目录
  • 新建的RN项目有警告
  • 直接删除vscode报警的部分
  • 禁掉vscode内置的TypeScript插件
  • 引入Flow Language Support解除报警

新建的RN项目有警告

我相信AwesomeProject是很多人的第一个RN项目，包括我在内。

npx react-native init AwesomeProject

但是当利用RN的脚手架搭建起来后，在vscode里打开项目，直接就会遇到如下这个vscode的警告：

'import type' declarations can only be used in TypeScript files. ts(8006)

这个vscode的警告不会影响程序的编译和运行，但是任何一个有代码洁癖的程序员，肯定是无法忍受的。我就被它折磨过一段时间，我先后采用了两种方式解决它。

直接删除vscode报警的部分

在我刚接触RN时，为了集中精力关注主要矛盾，我当时直接删除了那些vscode报警的地方。因为那个报警就是Flow的语法，而Flow只是静态类型检查的一种方式，是为了补齐javascript没有类型这块短板的，所以即使不使用它，而仅仅保留js的语法部分，也是不会影响运行的。

// import type {Node} from 'react';
...
const Section = ({children, title}) /*: Node*/ => {
...
const App /*: () => Node*/ = () => {
...

这样删除或者注释掉这些语法之后，vscdoe的报警就解除了。

禁掉vscode内置的TypeScript插件

过了一段时间，我渐渐熟悉了React Native的一些东西，主要矛盾解决的差不多了，是时候回过头来看看怎么处理它了。Flow的类型定义和Typescript还是蛮相似的，很多地方的语法都一模一样，也难怪vscode把它识别成了TypeScript。

因为我默认生成RN项目时，并不打算使用TypeScript，而是打算全套用FB的东西：RN配Flow。所以，第一步，就是针对我的workspace，关闭vscode的Typescript检查。

废话不多说，直接上图：

在vscode中disable掉内置的两个TypeScript插件，注意要选择仅仅是当前worksapce下disable就好。

引入Flow Language Support解除报警

既然禁止了TypeSCript，那么就需要引入Flow的插件了，还是上图：

该插件名字叫Flow Language Support，也是人气超高的插件啊。

引入插件后，你会发现，似乎这个插件并没有工作。因为一个插件的工作，其实有时候是需要node_modules里有让这个插件使用的命令行工具才行。插件本身，只是为了契合vscdoe的一个壳，壳子里的内容，是需要有对应的包的支持的。

yarn add flow-bin flow-parser -D

安装这两个包为插件赋予真正的灵魂。关闭vscode，然后重新打开。之所以这么做的目的是因为有些插件需要重新启动vscode才行，我的习惯就是每次安装完插件，甭管是否有重启的提示，都会主动重启。

很遗憾，这次又有了新的报错：

根据提示，好像是因为插件依赖的flow版本是0.183.0，而.flowconfig中的版本是^0.182.0。这个错误提醒了我们，要保证当前项目中，各个地方使用的flow版本，都一致才行。知道插件用的是0.183.0，那么也要保证其余地方也是这个版本。

yarn add flow-bin@0.183.0 flow-parser@0.183.0 -D

于是我们重新安装flow-bin和flow-parser，保证他俩的版本和插件依赖的版本一致。然后再把.flowconfig里的version改了。

重启一下vscode，再次打开后，Flow插件就工作正常了。

我在安装Flow插件的时候的版本提示是0.183.0，但是这个版本随着时间的推移，必然会变化，记得随机应变哦。

以上就是新建的React Native就遇到vscode报警解除方法的详细内容，更多关于React Native解除vscode报警的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • VSCode搭建React Native环境

    安装 React Native Tools 在插件市场搜索 react 找到 React Native Tools 进行安装: 创建的react-native的工程拖入vscode中 点击F5即可运行react-native 此时可能出现 如下界面,这是因为没有配置运行文件 在debug 页面,点击如下位置,添加configurations 然后点击添加配置,选择debug android 此时点击F5,则可出现如下界面,表示 react-native以运行起来 此时发现断点无法生效,且log的

  • 教你使用vscode 搭建react-native开发环境

    教你使用vscode 搭建react-native开发环境

    问题 代码没有提示: 许多刚接触RN开发的非前端同学,都会问"哪个编辑器有智能提示?"...而对于前端同学来说,现在的日子已经好很多了,要什么自行车. 低级代码错误: 这里的错误是指类似拼写错误,符号错误等.写完代码,跑起来各种报错,有时候费死劲的找,最后发现是个中文的分号问题. 解决办法 可选的方案大概有: 使用typescript: 直接使用有静态类型支持的js版本,but要再学习一套语法,而且我的代码都是ts写的,但很多好的公共库不是啊. 使用flow: 由于网络的原因,这个环境

  • React Native可复用 UI分离布局组件和状态组件技巧

    React Native可复用 UI分离布局组件和状态组件技巧

    目录 引言 包装 Context.Provider 作为父组件 使用 Context Hook 来实现子组件 使用 React 顶层 API 动态设置样式 复用 Context,实现其它子组件 抽取共同状态逻辑 自由组合父组件与子组件 示例 引言 单选,多选,是很常见的 UI 组件,这里以它们为例,来讲解如何分离布局组件和状态组件,以实现较好的复用性. 假如我们要实现如下需求: 这类 UI 有如下特点: 不管是单选还是多选,都可以有网格布局,我们可以把这个网格布局单独抽离出来,放到一个独立的组件

  • 解决VSCode调试react-native android项目错误问题

    解决VSCode调试react-native android项目错误问题

    如果运行react-native android项目出现如下错误: 解决办法如下: 一.执行adb devices,判断adb有没有断, 二.如果是adb断了就使用一下步骤 adb reverse tcp:8081 tcp:8081 npm start 如果adb没断,直接 npm start 如果执行gradle ass打包命令进行打包之后,出现如下错误: 1.检查react-native项目工程目录下的index.js里面的AppRegistry.registerComponent(appN

  • VSCode 配置React Native开发环境的方法

    VSCode 配置React Native开发环境的方法

    本文介绍了VSCode 配置React Native开发环境的方法,分享给大家,具体如下: 1.安装VSCode 2.安装插件 按F1 并输入 ext install 并回车, 或者使用 输入react-native安装React Native Tools 假定你已经在设备上安装了react native, 如果没有安装,请使用npm install -g react-native-cli安装 或者按照官方文档操作 新建一个RN工程 并使用VSCode打开 安装完成后 按F1可以看到命令里多了很

  • 最新版React Native环境搭建(亲测)

    最新版React Native环境搭建(亲测)

    目录 一.基础环境 1.1 安装Node.js 1.2 添加Android原生环境 1.3 添加iOS原生环境 二.创建示例项目 2.1 创建项目 2.2 运行项目 2.3 调试项目 三.集成到原生应用 3.1 集成到原生Android应用 3.2 集成到原生iOS应用 工欲善其事,必先利其器.搭建React Native开发环境,需要安装以下辅助工具. Node.js:React Native需要借助Node.js来创建和运行JavaScript代码. 原生开发工具及环境:React Nati

  • 详解React Native项目中启用Hermes引擎

    详解React Native项目中启用Hermes引擎

    目录 引言 一.启用 Hermes 引擎 1.1 Android 1.2 iOS 二.Hermes 引擎使用 2.1 检查 Hermes 引擎是否启用 2.2 绑定Hermes 2.3 使用DevTools在Hermes上调试JS 引言 目前,最新版本的React Native(0.70.0及以上版本)已经默认开启了Hermes引擎.而Hermes则是专门针对React Native应用而优化的全新JavaScript引擎,启用Hermes引擎可以优化启动时间,减少内存占用以及空间占用. 一.启

  • 新建的React Native就遇到vscode报警解除方法

    新建的React Native就遇到vscode报警解除方法

    目录 新建的RN项目有警告 直接删除vscode报警的部分 禁掉vscode内置的TypeScript插件 引入Flow Language Support解除报警 新建的RN项目有警告 我相信AwesomeProject是很多人的第一个RN项目,包括我在内. npx react-native init AwesomeProject 但是当利用RN的脚手架搭建起来后,在vscode里打开项目,直接就会遇到如下这个vscode的警告: 'import type' declarations can o

  • React Native自定义标题栏组件的实现方法

    大家好,今天讲一下如何实现自定义标题栏组件,我们都知道RN有一个优点就是可以组件化,在需要使用该组件的地方直接引用并传递一些参数就可以了,这种方式确实提高了开发效率. 标题栏是大多数应用界面必不可少的一部分,将标题栏剥离出来做成一个组件很有必要.今天先讲一个不带返回按钮的标题栏.废话少说,直接上代码: /** * 封装公共的标题头,没有返回按钮 */ 'use strict'; import React, { Component } from 'react'; import { Text, Vi

  • React Native集成支付宝支付的实现方法

    React Native集成支付宝支付的实现方法

    在RN应用开发过程中,集成支付宝和微信支付除了直接使用第三方的插件之,比如:react-native-yunpeng-alipay,我们还可以借助RN提供的NativeModules调用原生模块来实现支付.NativeModules是JS代码调用原生模块的桥梁.所以,我们只需要在原生工程中集成支付宝和微信支付的sdk,然后使用NativeModules调用即可. 首先,我们去支付宝官网下载支付宝SDK,下载对应的Android版本. 然后,将aar文件放入android/app/libs 文件夹

  • React Native与Android 原生通信的方法

    我们用React Native 做混合开发的时候免不了要原生和React Native 进行通信交互,这篇文章就是分享原生模块与JS传递数据的几种方式. 总的步骤可以分为如下几点: 在原生端定义Module类,继承ReactContextBaseJavaModule,在Module类里,定义交互的方法. 定义Package类,继承ReactPackage,将Module实例添加到集合. 在android继承的ReactApplication,回调实现getPackages方法,将Package实

  • React Native中TabBarIOS的简单使用方法示例

    React Native中TabBarIOS的简单使用方法示例

    前言 大家应该都知道,TabBarIOS是RN中自带的组件,可直接使用,不用引用第三方组件,下面讲解TabBarIOS的使用方法,话不多说了,来一起看看详细的介绍吧. 首先看一下效果图,如下图所示: 效果图 看完效果图再对代码进行说明. import React, { Component } from 'react'; import { StyleSheet, View, TabBarIOS, NavigatorIOS, Navigator, AppRegistry, Image, Toucha

  • React Native搭建iOS开发环境

    React Native搭建iOS开发环境

    一.写在前面 1. 什么是React-Native? React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目.支持用开源的JavaScript库React.js来开发iOS和Android原生App.初期仅支持iOS平台,同年9月份,该开源项目同时支持Android平台. React Native的原理是:在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染,比如以<View>取代<div>,以&

  • Windows下React Native的Android环境部署及布局示例

    Windows下React Native的Android环境部署及布局示例

    搭建基础环境 JDK(必须,不解释) SDK(建议使用Android Studio,集成SDK以及模拟器) genymotion(如果是使用真机或者Android Studio自带的模拟器,可以选择不装) NVM(node版本控制器,需要node4.0以上版本) 以上配置不是必须,可自行选择适合自己的环境,部分安装过程可能会涉及到翻墙,需要配置代理 配置踩坑记录 genymotion 这里选择genymotion模拟器来讲解,也会提一下Android Studio自带的模拟器的一些注意点,使用真

随机推荐