在 FlatList 反应原生“keyboardDismissMode”

Posted 2023-04-18

【中文标题】在 FlatList 反应原生“keyboardDismissMode”

【英文标题】：React Native "keyboardDismissMode" at FlatList

【发布时间】：2018-12-02 08:02:15

【问题描述】：

滚动 FlatList 时是否有可能防止键盘消失？

当使用 ScrollView 时，将 prop "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>
)

【问题讨论】：

您能否发布有关如何呈现相关 FlatList 组件的代码？

我对问题的更改有帮助吗？我添加了渲染 FlatList 的方式和位置。

【参考方案1】：

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

【参考方案2】：

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

只需在平面列表中添加onScrollBeginDrag=Keyboard.dismiss。它可以在 android 以及 ios 中运行，而 keyboardDismissMode='on-drag' 只能在 iOS 中运行

【参考方案3】：

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

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

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

你最好试试react-native-keyboard-aware-scroll-view这样的组件

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

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

【讨论】：

这是一个糟糕的方法：forums.expo.io/t/…

ScrollView 中的 FlatList 是个坏主意。仅在没有 FlatList 的情况下渲染所需的组件将给出相同的结果。

既然 FlatList 继承了 ScrollView 的 props，他就不能避免这种封装，直接从 flatlist 中使用想要的 props 吗？请参阅我的答案中的链接。我尝试使用 onScrollBeginDrag 属性，它可以工作