我可以在 react-native 的 textinput 中将静态消息显示为下拉列表吗答案

【问题标题】：Can I be able to show a static message below as a dropdown in the textinput in react-native我可以在 react-native 的 textinput 中将静态消息显示为下拉列表吗
【发布时间】：2020-04-15 05:39:37
【问题描述】：

我需要在输入输入时显示静态消息，或者如果用户专注于 react-native 中的 TextInput。

我需要显示输入字段必须包含以下字母。

如何以浮动方式在框下方显示此内容，而不是在 react-native 中的屏幕视图内

<TextInput>
    underlineColorAndroid="transparent"
    secureTextEntry={this.state.passwordDisplayed}
    textContentType="password"
    onChangeText={text => this.setState({ password: text })}
    bluronSubmit={true}
    placeholderTextColor={'grey'}
    placeholder={'Password'}
</TextInput>

【问题讨论】：

标签： react-native textinput

【解决方案1】：

React Native 的 TextInput 没有用于显示任意消息的道具，但您可以通过创建一个包含文本输入和消息的自定义组件来做到这一点，并通过观察文本输入焦点来控制何时显示消息.

要将消息显示为输入范围之外的“浮动”，请将其定位为“绝对”并添加与输入高度相等的上边距。您可以使用onLayout 回调来读取您输入的大小：

const TextInputWithMessage = ({ message, ...textInputProps }) => {
  const [showMessage, setShowMessage] = useState(false);
  const [inputHeight, setInputHeight] = useState(0);

  return (
    <View onLayout={({ nativeEvent }) => setInputHeight(nativeEvent.layout.height)}>
      <TextInput 
        {...textInputProps}
        onFocus={() => setShowMessage(true)}
        onBlur={() => setShowMessage(false)}
      />
      {showMessage && <Text style={{ ...StyleSheet.absoluteFillObject, top: inputHeight }}>{message}</Text>}
    <View>
  )
}

请注意，这将覆盖您传入textInputProps 的任何onFocus 和onBlur 回调。如果你需要一些自定义行为，你可以像这样保留它：

onFocus={e => {
  setShowMessage(true);
  if (textInputProps.onFocus) textInputProps.onFocus(e);
}}

为简洁起见省略。

【讨论】：