我尝试在我的react-native项目中实现react-native-google-places-autocomplete,但onPress函数根本不起作用。我已经尝试过StackOverflow上的其他解决方案,但它根本不起作用。我还在父组件中添加了“keyboardShouldPersistTaps ='always'。如果有帮助的话,我使用“navigation.navigate(“maps”)”来到达这个屏幕。
下面是代码。
class ChangeAddress extends PureComponent<Props> {
render() {
const { navigation } = this.props;
return (
<ScrollView
contentContainerStyle={{ flex: 1 }}
style={styles.modalContainer}
keyboardShouldPersistTaps="always">
<View style={styles.modalHeader}>
<Button onPress={() => navigation.goBack()} style={styles.backButton}>
<Image source={backLogo} />
</Button>
<View style={styles.searchBar}>
<View>
<Text style={styles.pickUpLocation}>Set Pickup Location</Text>
</View>
<GooglePlacesAutocomplete
placeholder="Search"
minLength={2}
autoFocus={false}
listViewDisplayed={false}
renderDescription={(row) => row.description}
fetchDetails={true}
onPress={(data, details = null) => {
console.log('HIIIIIIIIIIIIIIIIII', data, details);
}}
query={{
key: 'API',
language: 'en',
}}
styles={{
textInputContainer: {
backgroundColor: 'rgba(0,0,0,0)',
borderTopWidth: 0,
borderBottomWidth: 0,
width: '90%',
},
textInput: {
marginLeft: 0,
marginRight: 0,
height: 40,
color: '#5d5d5d',
fontSize: 14,
borderWidth: 1,
borderColor: '#778899',
},
predefinedPlacesDescription: {
color: '#1faadb',
},
description: {
fontWeight: 'bold',
borderTopWidth: 0,
borderBottomWidth: 0,
opacity: 0.9,
},
listView: {
color: 'black',
position: 'absolute',
top: 70,
left: -40,
width: dimens.width,
elevation: 1,
},
}}
/>
</View>
</View>
</ScrollView>
);
}
}
我错过了什么?提前谢谢你。
3条答案
按热度按时间wwtsj6pe1#
我找到了一个解决方案。由于某种原因,onPress函数只对位于顶部/部分视图的地址有效,而您正在使用组件。在我的例子中,我从listView中删除了top:70,令我惊讶的是,我现在可以选择一些地址。onPress可以工作,但只对那些位于父视图的listView地址有效。
我所做的就是给父视图一个“100%”的高度,这样当listView打开时,它会福尔斯在父视图的 * 内部 *。然后使用“flex-start”把它向上推。现在工作得很完美。
ttisahbt2#
在添加keepResultsAfterBlur={True}后,它对我有效
bwitn5fc3#
要解决此问题,请在“Scrollview”中添加“keyboardShouldPersistTaps”属性,方法是添加此问题解决