React Native keyboardDismissMode в FlatList

Есть ли возможность предотвратить отключение клавиатуры при прокрутке FlatList?

При использовании ScrollView установка для свойства «keyboardDismissMode» значения «none» является решением этой проблемы, но это не работает для меня в FlatList ...

Я использую FlatList внутри самодельного компонента, то есть в Stack-Navigator, в то время как в его заголовке есть выделенный TextInput. Я визуализирую FlatList следующим образом:

<View style={{flex: 1}}>
  <FlatList 
    style={{flex: 1}}
    data={this.props.data}
    keyExtractor={(item, index) => item.id}
    renderItem={this.renderItem}
  />
</View>

Функция renderItem ():

renderItem = ({item, index}) => (
  <TouchableHighlight
    style={{paddingVertical: 10}}
    onPress={() => {
      this.props.onChooseItem(item);
    }}
  >
    <Text numberOfLines={1} >
      {item.text}
    </Text>
  </TouchableHighlight>
)

react-native scrollview react-native-flatlist textinput react-native-scrollview
person Paul    schedule 22.06.2018    source источник
comment
Можете ли вы опубликовать код того, как вы визуализируете рассматриваемый компонент FlatList?   -  person Pat Needham    schedule 23.06.2018
comment
Помогают ли мои изменения в вопросе? Я добавил, как и где визуализировать FlatList.   -  person Paul    schedule 23.06.2018

Ответы (2)


arrow_upward
1
arrow_downward

Инкапсулируйте свой FlatList в ScrollView. Затем установите для него свойство keyboardDismissMode:

<ScrollView keyboardDismissMode='on-drag' style={{flex: 1}}>
  <FlatList 
    style={{flex: 1}}
    data={this.props.data}
    keyExtractor={(item, index) => item.id}
    renderItem={this.renderItem}
  />
</ScrollView>

Для устройств iOS вы даже можете установить для этого свойства значение interactive. Это заставит клавиатуру закрыться интерактивно ... перетаскивание вверх отменяет закрытие.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ:

Но, как заметил @tipos (и он прав!) Ниже в комментариях, это не рекомендуемый способ инкапсулировать FlatList в Scrollview, потому что, если он принудительно перерисовывает весь плоский список, каждый раз, когда вы прокручиваете экран. Возможно, вам лучше попробовать такой компонент, как react-native-keyboard-aware-scroll -view

Я нашел в этой статье несколько альтернативных идей, как это исправить:
Как сделать использовать KeyboardAvoidingView с FlatList?

Проверьте: https://facebook.github.io/react-native/docs/scrollview#keyboarddismissmode

person suther    schedule 15.02.2019
comment
Для этого это был плохой способ: forum.expo.io/t/ - person A. Amini; 26.04.2020
comment
FlatList внутри ScrollView - плохая идея. Простой рендеринг необходимого компонента без FlatList даст тот же результат. - person tipos; 27.07.2020
comment
Поскольку FlatList наследует свойства ScrollView, не может ли он просто избежать этой инкапсуляции и использовать желаемое свойство непосредственно из плоского списка? См. Ссылку в моем ответе. Я пробовал использовать свойство onScrollBeginDrag, и он работает - person rfii; 12.03.2021

arrow_upward
0
arrow_downward

Документы в начале справочного раздела говорят, что FlatList наследует свойства ScrollView, если он не вложен в другой FlatList той же ориентации.
Итак, я думаю, вы можете просто использовать этот keyboardDismissMode без инкапсуляции в scrollview.

person rfii    schedule 12.03.2021