FlatList 上的 React Native "keyboardDismissMode"

Question

是否有可能在滚动 FlatList 时阻止键盘关闭？

当使用 ScrollView 时，将属性 "keyboardDismissMode" 设置为 "none" 是解决此问题的方法，但这对我在 FlatList 中不起作用...

我在 self-made 组件中使用 FlatList，即在 Stack-Navigator 中，而在其 header 中有一个集中的 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>
)

Answer 1

您可能会考虑将 FlatList 封装在 ScrollView 中？

即使这似乎可以解决问题，但不是推荐的方法！

那是因为如果每次滚动屏幕时它都会强制重新渲染整个平面列表。

你最好试试 react-native-keyboard-aware-scroll-view

这样的组件

我发现这篇文章有一些替代想法来修复它：
How to use KeyboardAvoidingView with FlatList?

检查：https://facebook.github.io/react-native/docs/scrollview#keyboarddismissmode

Answer 2

文档 at the beginning of the reference section 说 FlatList“继承了 ScrollView Props，除非它嵌套在另一个相同方向的 FlatList 中。”
所以我认为您可以只使用 keyboardDismissMode 而无需在滚动视图中封装。

Answer 3

平面列表中不需要滚动视图，它会产生性能问题。

只需在平面列表中添加 onScrollBeginDrag={Keyboard.dismiss}。它也适用于 android iOS 而 keyboardDismissMode='on-drag' 仅适用于 iOS

FlatList 上的 React Native "keyboardDismissMode"

React Native "keyboardDismissMode" at FlatList

react-native

scrollview

textinput

react-native-flatlist

react-native-scrollview