当用户在键盘或输入之外的任何地方单击时,我希望关闭键盘。以下代码可以正常工作:
<ScrollView
keyboardShouldPersistTaps='handled'
contentContainerStyle={{ flex: 1 }}
>
<View style={styles.inputContainer}>
<TextInput
placeholder="Search Term"
style={styles.input}
onChangeText={setSearch}
value={search}
returnKeyType="search"
onSubmitEditing={handleSubmit}
/>
</View>
</ScrollView>
样式非常标准:
inputContainer: {
position: 'absolute',
top: stackHeaderHeight + 10,
height: height * .1,
width: '100%',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
但是,当我介绍地图react-native-maps
时,键盘关闭将不起作用。操纵zIndex
中的ScrollView
并没有什么不同。
<ScrollView
keyboardShouldPersistTaps='handled'
contentContainerStyle={{ flex: 1 }}
>
<View style={styles.inputContainer}>
<TextInput
placeholder="Search Term"
style={styles.input}
onChangeText={setSearch}
value={search}
returnKeyType="search"
onSubmitEditing={handleSubmit}
/>
</View>
<MapView
style={StyleSheet.absoluteFillObject}
region={region}
onRegionChangeComplete={onRegionChangeComplete}
ref={mapviewRef}
showsUserLocation={true}
>
// markers and callouts
</MapView>
</ ScrollView>
我尝试用<TouchableWithoutFeedback style={styles.container} onPress={Keyboard.dismiss}>
包装整个组件,但没有任何区别。