在FlatList中反应Native“keyboardDismissMode”

Question

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

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。这使键盘以交互方式解除...向上拖动取消解雇。

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