问题
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