用于自定义组件的 React Native VS Code Intellisense [英] React Native VS Code Intellisense for custom components

问题描述

我在理解如何制作自定义组件时遇到了一些问题.我为自己制作了一个简单的 Text 组件，以摆脱每次使用 Text 时设置 fontsize 和 fontfamily 的麻烦.

I am having some trouble understanding how to make custom components. I make a simple Text component for myself to get rid of setting fontsize and fontfamily every single time I use a Text.

import React, { Component } from 'react';

import { Colors } from "../assets/Colors"
import { Text as RNText } from 'react-native';

class Text extends Component {
    render() {
        return (
            <RNText
                {...this.props}
                style={[{
                    fontFamily: 'Roboto-Medium',
                    fontSize: 16,
                    color: Colors.text
                }, this.props.style]}>
                {this.props.children}
            </RNText>
        )
    }
}

export default Text;

这里的问题是当我输入我自己的组件时"<Text style={{marginV" intelliSense 不会自动完成这个到 marginVertical.此外，当我输入 "<Text onPre" 时，intelliSense 也不会将自动完成功能弹出到 onPress.我对制作漂亮的组件感到非常兴奋，但是在没有智能感知的情况下使用它非常令人沮丧.我已经尝试过设置 proptypes 但它没有用.有什么快速解决方案吗?

The problem here is when I type my own component "<Text style={{marginV" intelliSense doesn't pop autocomplete this to marginVertical. Also when I type "<Text onPre" intelliSense also doesn't pop autocomplete this to onPress. I am really excited about making beautiful components but this is so frustrating to use without intellisense. I already tried setting proptypes but it didn't work. Is there any quick solution for this?

推荐答案

你需要定义 props type bypass Props 这样的类内组件 extends Component{

you need to define props type bypass Props in-class component like this extends Component<Props> {

import React, { Component } from 'react';

import { Colors } from "../assets/Colors"
import { Text as RNText, StyleProp, ViewStyle } from 'react-native';

type Props = {
    style: StyleProp<ViewStyle>
}

class Text extends Component<Props> {
    render() {
        return (
            <RNText
                {...this.props}
                style={[{
                    fontFamily: 'Roboto-Medium',
                    fontSize: 16,
                    color: Colors.text
                }, this.props.style]}>
                {this.props.children}
            </RNText>
        )
    }
}

export default Text;

这篇关于用于自定义组件的 React Native VS Code Intellisense的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！