React Native “keyboardDismissMode” at FlatList

心不动则不痛 提交于 2020-05-15 10:37:26

问题


Is there any possibility to prevent the keyboard from dismissing when scrolling a 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...

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>

The renderItem() function:

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

回答1:


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>

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

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



来源:https://stackoverflow.com/questions/50994770/react-native-keyboarddismissmode-at-flatlist

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!