我正在尝试响应本机地图,我想在地图下方显示文本字段和其他组件,但所有组件都显示在地图上方
ContactComponent-(我在使用地图组件的地方,在其下方要显示其他组件的地方)
render() {
return (
<View style={styles.container}>
<MapComponent />
<Text>Akas</Text>
</View>
);
}
MapComponent-
render() {
return (
<View style={styles.container}>
<MapView
provider={PROVIDER_GOOGLE} // remove if not using Google Maps
style={styles.map}
initialRegion={{
latitude: 19.15384,
longitude: 72.92902,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}}
>
<Marker
coordinate={{
latitude: 19.15384,
longitude: 72.92902
}}
title={"Hello"}
description={"desc"}
/>
</MapView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
height: 200,
width: 400,
justifyContent: "flex-end",
alignItems: "center"
},
map: {
...StyleSheet.absoluteFillObject
}
});
答案 0 :(得分:1)
StyleSheet.absoluteFillObject
基本上与:
position:absolute,
top: 0,
left: 0,
...
当组件处于绝对位置时,它会与正常的布局流程分离(就像在CSS中一样),因此请尽量不要将其用于地图。而是使用flex:1,
或width: 100%
等。