React Native“keyboardDismissMode"在平面列表 [英] React Native "keyboardDismissMode" at FlatList

问题描述

在滚动 FlatList 时是否有可能防止键盘关闭?

Is there any possibility to prevent the keyboard from dismissing when scrolling a FlatList?

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

When using a ScrollView setting the prop "keyboardDismissMode" to "none" is the solution to this problem, but this doesn't work for me at a FlatList...

我在自制组件中使用 FlatList，即在 Stack-Navigator 中，而其标题中有一个重点 TextInput.我这样渲染 FlatList:

I use the FlatList inside a self-made component, that is in a Stack-Navigator, while there is a focussed TextInput in its header. I render the FlatList like this:

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

renderItem() 函数:

The renderItem() function:

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

推荐答案

将您的 FlatList 封装在 ScrollView 中.然后为其设置属性keyboardDismissMode:

Encapsulate your FlatList in a ScrollView. Then set the property keyboardDismissMode for it:

<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.这使键盘以交互式关闭...向上拖动取消关闭.

For iOS devices you even can set this property to interactive. This make the keyboard dismiss interactively ... dragging upwards cancels the dismissal.

附加信息:

但正如@tipos 在下面的评论中注意到的(他是对的！)，这不是将 FlatList 封装在 Scrollview 中的推荐方法，因为如果它强制重新渲染整个平面列表，则每次滚动屏幕时.你最好尝试一个像 react-native-keyboard-aware-scroll 这样的组件-查看

But as @tipos noticed (and he is right!) below in the comments, it's not a recommended way to encapsulate an FlatList in a Scrollview, because if it force rerendering the whole flatlist, each time you scroll the screen. You might better try a component like react-native-keyboard-aware-scroll-view

我发现这篇文章有一些替代的想法来解决它:
如何使用带有 FlatList 的 KeyboardAvoidingView?

I've found this article with some alternate Ideas to fix it:
How to use KeyboardAvoidingView with FlatList?

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

这篇关于React Native“keyboardDismissMode"在平面列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！