如何使用 React Native TypeScript 可重用组件获取样式道具建议？

Question

我有一个编码如下的文本可重用组件：

import React, {FC, ReactNode} from 'react';
import {StyleSheet, Text as RNText} from 'react-native';

interface TextProps {
  style?: any;
  children: ReactNode | ReactNode[];
}

const Text: FC<TextProps> = ({style, children}) => {
  return <RNText style={{...styles.text, ...style}}>{children}</RNText>;
};

export default Text;

const styles = StyleSheet.create({
  text: {
    color: colors.black,
    fontFamily: fonts.light,
  },
});

所以每次我想设置它的样式时，我都没有得到任何关于设置 React 本机文本组件样式的道具建议：

我如何获得所有反应原生样式道具建议，以使用 typescript 自定义可重复使用的制作组件？

Answer 1

你应该使用StyleProp，看下面的代码：

import {
  ActivityIndicator,
  StyleProp,
  StyleSheet,
  View,
  ViewStyle,
  TextStyle
} from 'react-native';

interface LazyLoadImageType {
  imgUri: string;
  onLoadEnd?: () => void;
  style?: StyleProp<TextStyle>;
  // or
  style?: StyleProp<ViewStyle>;
  // or
  style?: StyleProp<ViewStyle | TextStyle>;

}

如何使用 React Native TypeScript 可重用组件获取样式道具建议？

How to get style props suggestions with react native typescript re-usable component?

javascript

typescript

reactjs

react-native