Реагируйте на собственный фокус TextInput и создайте непрозрачный фон и отключите любые события вне - PullRequest
Новая
       53

Реагируйте на собственный фокус TextInput и создайте непрозрачный фон и отключите любые события вне

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

Как создать непрозрачный фон при фокусировке на поле ввода? Вот что я пытаюсь имитировать c:

https://imgur.com/a/uEF2bc7

У меня есть Плоский список , который отображает несколько текстовых полей:

Родительский компонент 

<KeyboardAwareFlatList
  keyboardShouldPersistTaps="never"
  enableResetScrollToCoords={false}
  keyboardDismissMode="on-drag"
  renderItem={({item, index}) => (
    <View>
      <TextInputComponent {...item} />
    </View>
  )}
  keyExtractor={item => item.mediaUrl}
/>

TextInputComponent Дочерний компонент: 

<View>
  <TextInput
    style={styles.input}
    placeholder={'Title'}
    placeholderTextColor="#ccc"
    onChangeText={e =>
      props.handleChangeText(props.index, e, 'title')
    }
    onFocus={e => handleInputFocus(e)}
    value={props.title}
  />

  // hidden stuff, show only on focus
  <View>
    // ...
  </View>
</View>

В настоящее время, когда клавиатура отображается в фокусе, Я могу отклонить его, если щелкну за пределами ввода текста, однако, если он нажмет на другой ввод текста, клавиатура останется открытой. Я хочу, чтобы любые события происходили ТОЛЬКО в оболочке с выбранным входом. (вроде как работает модал)

Раньше я работал с jquery, где вы можете сделать что-то вроде this, а затем получить элемент-обертку для выбранного ввода, но я не знаю, как это работает с React Native.

Поскольку у меня есть плоский список, будет многократный ввод текста, так как вы можете получить оболочку Просмотр выбранного ввода и создать непрозрачный фон, отличный от оболочки выбранного входа? Кроме того, возможно ли легко скрыть / показать больше функций в фокусе?

...