Могу ли я показать сообщение stati c ниже в виде раскрывающегося текстового ввода в реагирующем - PullRequest
Новая
       33

Могу ли я показать сообщение stati c ниже в виде раскрывающегося текстового ввода в реагирующем

0 голосов
/ 15 апреля 2020

Мне нужно показывать сообщение stati c при наборе ввода или если пользователь фокусируется на TextInput в реагирующем роде.

Мне нужно показать, что поле ввода должно содержать следующие буквы.

Как я могу показать это ниже поля в плавающем режиме, а не внутри вида экрана в реагирующем роде 

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

1 Ответ

0 голосов
/ 15 апреля 2020

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>
  )
}

Обратите внимание, что это переопределит любой onFocus и onBlur обратный вызов, который вы передаете в textInputProps. Если вам нужно какое-то нестандартное поведение, вы можете сохранить его так: 

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

Опущено для краткости.

...