Question

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

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

我在Stack-Navigator中的一个自制组件内部使用FlatList，而其标题中有一个聚焦的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中。然后为其设置属性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。这使键盘可以交互地关闭（em） ... ...向上拖动可取消关闭。

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

Answer 2

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

在FlatList

2 个答案: