TextInput 样式 Props 类型 react native答案

【问题标题】：TextInput style Props type react nativeTextInput 样式 Props 类型 react native
【发布时间】：2021-06-30 12:26:05
【问题描述】：

我正在尝试将样式作为道具传递给我的自定义TextInput 组件。我发现this sn-p 在道具中键入按钮和标签样式：

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

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

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

【问题讨论】：

你能添加一些你的自定义TextInput组件的代码吗？
@DevAttendant 我找到了答案

标签： reactjs typescript react-native

【解决方案1】：

我正在检查TextInputProps 接口，我发现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: {...}, 
});

【讨论】：