3

滚动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>
)
4

3 回答 3

0

将您的 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 中不是推荐的方法，因为如果它强制重新渲染整个 flatlist，则每次滚动屏幕时。您最好尝试像react-native-keyboard-aware-scroll-view这样的组件

我发现这篇文章有一些替代的想法来解决它：
如何将 KeyboardAvoidingView 与 FlatList 一起使用？

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

于 2019-02-15T07:49:22.657 回答
0

参考部分开头的文档说 FlatList “继承 ScrollView Props，除非它嵌套在另一个相同方向的 FlatList 中。”
所以我认为你可以在不封装在滚动视图中的情况下使用keyboardDismissMode。

于 2021-03-12T15:31:56.610 回答
0

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

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

于 2022-01-13T07:33:16.897 回答