React Native - Google Autocomplete API
React Native - Google Autocomplete API
提问于 2019-05-04 17:47:42
我的问题是描述的Text结果彼此重叠。我不知道这是不是一个bug，我只是不能让它解决它。我尝试了任何关于风格的东西，但都不起作用。我需要其他不同观点的人的帮助。感谢您抽出时间阅读这篇文章。
重叠文本的图像：
我还收到了关于独特的key属性的警告，只是添加了这个问题，因为它可能与我的问题有关。
警告key道具的图像：
以下是我的代码：
async onChangeDestination(destination) {
this.setState({ destination });
const apiUrl = `https://maps.googleapis.com/maps/api/place/autocomplete/json?key=${apiKey}
&input=${destination}&location=${this.state.focusedLocation.latitude},
${this.state.focusedLocation.longitude
}&radius=2000`;
try {
const result = await fetch(apiUrl);
const json = await result.json();
console.log(json);
this.setState({
predictions: json.predictions
});
} catch (err) {
console.log(err)
}
}
render() {
//For Prediction
const predictions = this.state.predictions.map(prediction => (
<View style={styles.descriptionContainer}>
<Text key={prediction.id} style={styles.descriptionText}>{prediction.description}</Text>
</View>
));
//For Marker
let marker = null;
if(this.state.locationChosen) {
marker = <MapView.Marker coordinate={this.state.markerPosition}/>
}
return(
<View style={styles.container}>
{/* <StatusBar backgroundColor={'transparent'} translucent={true}/> */}
<MapView
style={styles.map}
initialRegion={this.state.focusedLocation}
onPress={this.pickLocationHandler}
showsUserLocation={true}
ref={ref => this.map = ref} //For animating map movement
>
{marker}
</MapView>
{/* <TouchableOpacity onPress={this.getLocationHandler} style={styles.iconContainer}>
<Icon name="md-locate" size={30} color="blue"/>
</TouchableOpacity> */}
<TextInput
placeholder="Search for an event or place!"
style={styles.destinationInput}
onChangeText={destination => {
this.setState({destination});
this.onChangeDestinationDebounced(destination)
}}
value={this.state.destination}
/>
{predictions}
</View>
);
}
const styles = StyleSheet.create({
container: {
zIndex: -1,
alignItems: 'center',
},
map: {
height: '100%',
width: '100%'
},
iconContainer: {
position: 'absolute',
top: 60,
right: 15,
zIndex: 1
},
destinationInput: {
position: 'absolute',
zIndex: 10,
width: '97%',
top: 15,
backgroundColor: 'white',
borderRadius: 8,
padding: 8
},
descriptionText: {
color: 'black',
position: 'absolute',
zIndex: 10,
top: 60,
},
descriptionContainer: {
zIndex: 2,
position: 'absolute',
top: 20,
height: Dimensions.get('window').height,
width: Dimensions.get('window').width,
justifyContent: 'space-between'
}
})回答 1
Stack Overflow用户
发布于 2019-05-04 18:46:11
所以我不能运行代码，但是你的descriptionText风格的位置是：‘绝对’。你所看到的行为是意料之中的，因为每个文本都被放在相同的“绝对”位置。删除它应该会给你想要的结果。
抛出键警告是因为descriptionContainer视图是映射函数中的根元素，所以这里应该有键。希望这能有所帮助，我更新了下面的源代码，并声明我无法测试它。
async onChangeDestination(destination) {
this.setState({ destination });
const apiUrl = `https://maps.googleapis.com/maps/api/place/autocomplete/json?key=${apiKey}
&input=${destination}&location=${this.state.focusedLocation.latitude},
${this.state.focusedLocation.longitude
}&radius=2000`;
try {
const result = await fetch(apiUrl);
const json = await result.json();
console.log(json);
this.setState({
predictions: json.predictions
});
} catch (err) {
console.log(err)
}
}
render() {
//For Prediction
const predictions = this.state.predictions.map(prediction => (
<Text key={prediction.id} style={styles.descriptionText}>{prediction.description}</Text>
));
//For Marker
let marker = null;
if(this.state.locationChosen) {
marker = <MapView.Marker coordinate={this.state.markerPosition}/>
}
return(
<View style={styles.container}>
{/* <StatusBar backgroundColor={'transparent'} translucent={true}/> */}
<MapView
style={styles.map}
initialRegion={this.state.focusedLocation}
onPress={this.pickLocationHandler}
showsUserLocation={true}
ref={ref => this.map = ref} //For animating map movement
>
{marker}
</MapView>
{/* <TouchableOpacity onPress={this.getLocationHandler} style={styles.iconContainer}>
<Icon name="md-locate" size={30} color="blue"/>
</TouchableOpacity> */}
<TextInput
placeholder="Search for an event or place!"
style={styles.destinationInput}
onChangeText={destination => {
this.setState({destination});
this.onChangeDestinationDebounced(destination)
}}
value={this.state.destination}
/>
{this.state.predictions && this.state.predictions.length > 0 && (
<View style={styles.descriptionContainer}>{predictions}</View>
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
zIndex: -1,
alignItems: 'center',
},
map: {
height: '100%',
width: '100%'
},
iconContainer: {
position: 'absolute',
top: 60,
right: 15,
zIndex: 1
},
destinationInput: {
position: 'absolute',
zIndex: 10,
width: '97%',
top: 15,
backgroundColor: 'white',
borderRadius: 8,
padding: 8
},
descriptionText: {
color: 'black',
},
descriptionContainer: {
zIndex: 2,
position: 'absolute',
top: 20,
height: Dimensions.get('window').height,
width: Dimensions.get('window').width,
}
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55981306
复制相关文章
相似问题
腾讯云开发者
