在 FlatList 反应原生“keyboardDismissMode”答案

【问题标题】：React Native "keyboardDismissMode" at FlatList在 FlatList 反应原生“keyboardDismissMode”
【发布时间】：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 的方式和位置。

标签： react-native scrollview textinput react-native-flatlist react-native-scrollview

【解决方案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 属性，它可以工作