用于自定义组件的 React Native VS Code Intellisense

Question

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

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 但它没有用。有什么快速解决办法吗？

Answer 1

你需要定义 props 类型绕过 Props 像这样 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;