解决Vscode开发React Native应用时编写Stylesheet没有智能代码提示的问题

栏目: 服务器 · 发布时间: 4年前

内容简介:文章转载务必带上原文地址!否则盗版必究。似乎无代码提示:

文章转载务必带上原文地址!否则盗版必究。

问题描述

似乎 Vscode 原生对 React Native 的样式表代码提示有问题,所以在github找到了两个解决办法。

无代码提示:

解决Vscode开发React Native应用时编写Stylesheet没有智能代码提示的问题

解决Vscode开发React Native应用时编写Stylesheet没有智能代码提示的问题

解决后

以下两种办法亲测可用

解决办法一

首先在utils目录下创建 工具

import { StyleSheet as RnStyleSheet, ViewStyle, TextStyle, ImageStyle } from '<a href="https://www.miaoroom.com/tag/react" data-toggle="tooltip" title="查看更多关于 react 的文章" target="_blank">react</a>-native';

type StyleProps = Partial<ViewStyle | TextStyle | ImageStyle>;

export const StyleSheet = {
    create(styles: { [className: string]: StyleProps }) {
        return RnStyleSheet.create(styles);
    }
};

然后在我的组件中

import { Stylesheet }  from './utils';

StyleSheet.create({
   "myClass": {
      // get intellisense for keys and values here
   }
});

当然,你需要扩展它以代理其他方法调用(flatten,...)到StyleSheet。

解决办法二

修改源码

找到 npm install @types/react-native --save-dev and then open node_modules/@types/react-native/index.d.ts

或者 ctrl +左键点击 'react-native' 进入

解决Vscode开发React Native应用时编写Stylesheet没有智能代码提示的问题

随后搜索 export namespace StyleSheet {

解决Vscode开发React Native应用时编写Stylesheet没有智能代码提示的问题

删除源码中的 create 代码

解决Vscode开发React Native应用时编写Stylesheet没有智能代码提示的问题

替换为:

/**
  * Creates a StyleSheet style reference from the given object.
  */
export function create<T extends NamedStyles<T>>( styles: T | Style ): {
    [P in keyof T]: RegisteredStyle<T[P]>;
};

然后在刚刚的 export namespace StyleSheet { 上方添加以下代码,定义类型

type Style = ViewStyle | TextStyle | ImageStyle;
type NamedStyles<T> = {
    [P in keyof T]: Style;
}

解决Vscode开发React Native应用时编写Stylesheet没有智能代码提示的问题

至此,保存源代码,解决!去看看你的项目文件中有没有智能提示吧,反正我是有了,非常爽歪歪,上面两个办法都是通用的。

解决Vscode开发React Native应用时编写Stylesheet没有智能代码提示的问题

由此可见,提示的缺失可能是TS的类型声明问题。

参考自: https://github.com/Microsoft/vscode-react-native/issues/379


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Java Script深度剖析

Java Script深度剖析

卢云鹏、沈维伦、Don Gosselin、李筱青 / 卢云鹏、沈维伦、李筱青 / 北京大学出版社 / 2004-10-1 / 49.0

本书适合于大中专院计算机相关专业作为教材,也是JavaScript初学者以及JavaScript爱好者的理想参考用书。书中详细介绍了基本的JavaScript程序设计原理以及实现它们的语法,内容包括JavaScript简介,变理、函数、对角和事件,数据类型、运算符,结构化逻辑控制结构和语句,窗口和框架,表单,动态HTML和动画,cookie和安全性,服务器端 JavaScript,数据库连接,使用......一起来看看 《Java Script深度剖析》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

SHA 加密
SHA 加密

SHA 加密工具