ScrollView正在移除React Native中的TextInput键盘

Question

我使用带有自定义清除图标的TextInput来清除文本。由于我需要在屏幕中保留多个TextInput，所以我使用了ScrollView:

import React, {Component} from 'react';
import {
View,
Text,
ScrollView,
StyleSheet,
Image,
TouchableOpacity,
TextInput,
} from 'react-native';
export default class SuccessScreen extends Component {
constructor(props) {
super(props);
this.state = {};
}
handleRightClick() {
console.log('handleRightClick');
}
render() {
return (
<ScrollView>
<View style={styles.SectionStyle}>
<TextInput style={styles.input} />
<TouchableOpacity
style={styles.ImageStyle}
onPress={this.handleRightClick}>
<Image source={require('../../images/cross_icon.png')} />
</TouchableOpacity>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({

input: {
flex: 1,
borderColor: '#000000',
borderBottomWidth: 1,
height: 40,
fontSize: 15,
color: '#000000',
},

SectionStyle: {
flexDirection: 'row',
minWidth: '100%',
height: 40,
},
ImageStyle: {
height: 25,
width: 25,
marginLeft: -25,
alignContent: 'center',
resizeMode: 'stretch',
alignItems: 'center',
},
});

在没有ScrollView的情况下，会调用handleRightClick，但当我使用ScrollView时，它只是关闭键盘，不调用handleRightClick。

Answer 1

ScrollView有一个道具keyboardShouldPersistTaps。您应该将其设置为'handled'，这样您的TouchableOpacity将处理印刷机，而不是ScrollView。

<ScrollView keyboardShouldPersistTaps='handled'>
// ...
</ScrollView>