具有地图填充和适合屏幕.不工作

Question

我正在尝试使地图适合并填充屏幕

地图只覆盖屏幕的一部分，但在这种情况下，我想让它在任何android设备上填充屏幕。我需要人帮忙。

我的源代码是这样的

import React, { Component } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import MapView , {Marker} from 'react-native-maps'; 
export default class ShowMap extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<View style={styles.container}>
<MapView
style={styles.map}
region={{
latitude: 6.406070,
longitude: 3.407350,
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
}}
>
<Marker
coordinate={{ latitude: 6.406070, longitude: 3.407350 }}
title='Emi School of Engineering'
description='This is where the magic happens!'
></Marker >
</MapView>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
height: 660,
width: 420,
justifyContent: 'flex-start',
alignItems: 'stretch',
},
map: {
...StyleSheet.absoluteFillObject,
},
});

看起来好像有什么事我需要做，我做得不对。

Answer 1

您可以从react-native提供的Dimension Interface中获取屏幕高度，并设置替换高度值。

import React, { Component } from 'react';
import { View, StyleSheet, Text, Dimensions } from 'react-native';
import MapView , {Marker} from 'react-native-maps'; 
//get screen height
const deviceHeight =Dimensions.get("window").height

export default class ShowMap extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<View style={styles.container}>
<MapView
style={styles.map}
region={{
latitude: 6.406070,
longitude: 3.407350,
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
}}
>
<Marker
coordinate={{ latitude: 6.406070, longitude: 3.407350 }}
title='Emi School of Engineering'
description='This is where the magic happens!'
></Marker >
</MapView>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
height: deviceHeight,
width: 420,
justifyContent: 'flex-start',
alignItems: 'stretch',
},
map: {
...StyleSheet.absoluteFillObject,
},
});