reactjs - TextInput 样式 Props 类型 React Native

Question

我正在尝试将样式作为 Prop 传递给我的自定义 TextInput 组件。我发现 this在 props 中输入按钮和标签样式的代码片段:

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

interface IProps {
 label: string;
  buttonStyle?: StyleProp<ViewStyle>;
  labelStyle?: StyleProp<TextStyle>;
}
// rest 

但我没有找到 TextInput 的任何内容，也没有找到任何有关 StyleProp 的文档 那么将样式传递给 TextInput 的正确方法是什么？

Answer 1

我正在检查TextInputProps接口(interface)，我发现TextStyle也用于TextInput:

style?: StyleProp<TextStyle>;

因此可以通过以下方式使用它:

import {StyleSheet, TextInput, TextInputProps , StyleProp , 
TextStyle } from 'react-native';

type Props = {
style?: StyleProp<TextStyle>,
// or 
style?: Pick<TextInputProps, "style">

};

const Input: React.FC<Props> = ({style: propStyles}) =>
    <TextInput
      style={ [styles.input, propStyles] }
    />


const styles = StyleSheet.create({
  input: {...}, 
});