时间戳

首页 > 解决方案 > TextInput 样式 Props 类型 react native

reactjs - TextInput 样式 Props 类型 react native

问题描述

我正在尝试将样式作为道具传递给我的自定义TextInput组件。我发现这个片段可以在道具中键入按钮和标签样式：

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

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

但我没有找到任何TextInput关于StyleProp 所以将样式传递给 TextInput 的正确方法是什么或任何文档？

标签： reactjstypescriptreact-native

解决方案

我正在检查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: {...}, 
});

推荐阅读