React Native：将设置从自定义组件传递到 TextInput答案

【问题标题】：React Native: Pass settings from custom component to TextInputReact Native：将设置从自定义组件传递到 TextInput
【发布时间】：2020-07-06 19:14:03
【问题描述】：

我有一个名为 TextInputField.js 的自定义组件：

import React from "react";
import {
    View,
    Text,
    TextInput,
    StyleSheet
} from "react-native";

const TextInputField = (props) => {
  return (
    <View style={styles.inputWrapper}>
      <Text style={styles.inputLabel}>{props.label}</Text>
      <TextInput {...props} style={styles.inputField} />
      <Text style={styles.inputCaption}>{props.caption}</Text>
    </View>
  );
};

export default TextInputField;

我是这样使用的：

<TextInputField 
  label='Test'
  caption='Sample'
  multiline={true}
  numberOfLines={4}
  onChangeText={(text) => {
    onChangeTextHandler(text);
  }}
/>

标签和标题工作正常。

snack 一切正常。

我的问题是：如何确保我添加的任何设置（如 multiline/numberOfLines={4}）被传递并被实际的 TextInput 使用？

【问题讨论】：

你已经在传递 {...props} 所以它应该可以工作
嗯，是的，我向那个 changetexthandler 添加了一个警报，它起作用了。我认为有一些默认的 iOS 行为不显示完整大小的输入，因为它让我可以使用返回键添加换行符。

标签： reactjs react-native

【解决方案1】：

要真正确保所有需要的东西都被传递下来，你应该进行道具验证，如explained here。

React 有一些内置的类型检查能力。运行类型检查组件的 props，你可以分配特殊的 propTypes

你会像这样使用它：

TextInputField.propTypes = {
  label: PropTypes.string,
   [.....]
};

【讨论】：

谢谢，我想我解决了。我期待看到 iOS 中可用的全部区域，但它看起来不像它的功能 - iOS 让我使用返回键添加带有多行集的换行符，如果不是，我不会让我这样做。