解決Vscode開發React Native應用時編寫Stylesheet沒有智慧代碼提示的問題

解決Vscode開發React Native應用時編寫Stylesheet沒有智慧代碼提示的問題

資源介紹參數
資源類別: JavaScript
如遇問題: 聯繫客服/留言反饋
釋放雙眼,帶上耳機,聽聽看~!
問題,描述似乎Vscode原生對React Native的樣式表代碼提示有問題,所以在github找到了解決辦法。

解決Vscode開發React Native應用時編寫Stylesheet沒有智慧代碼提示的問題

文章轉載務必帶上原文地址!否則盜版必究。

問題描述

似乎Vscode原生對React Native的樣式表代碼提示有問題,所以在github找到了兩個解決辦法。

無代碼提示:

no-intell

intell

解決後

以下兩種辦法親測可用

解決辦法一

首先在utils目錄下創建工具類

import { StyleSheet as RnStyleSheet, ViewStyle, TextStyle, ImageStyle } from 'react-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'進入

react-native-dir

隨後搜尋export namespace StyleSheet {

react-native-intell

刪除源碼中的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

聲明:本文為原創作品,版權歸作者所有。未經許可,不得轉載或用於任何商業用途。如若本站內容侵犯了原著者的合法權益,可聯繫我們進行處理。

給TA打賞
共{{data.count}}人
人已打賞
0 條回復 A文章作者 M管理員
    暫無討論,說說你的看法吧
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜尋