如何解决如何调整以alignItems和justifyContent垂直和水平居中的组件的位置?
我的目标是调整Icon
分量以指向精确的坐标。当前解决方案确实将Icon
组件垂直和水平居中。但这与Marker
组件相比不够精确。
当前的解决方案是使用top=-20
向Icon组件添加样式,但是我认为这不是正确的解决方案。我相信top=-20
仅针对我的设备,不同的设备将导致不同的结果。
我尝试使用Marker
组件,但是我还没有弄清楚如何防止每次状态更新时都重新渲染。注意:如果不重新渲染,标记将不会改变位置。
import React from 'react';
import {StyleSheet,View} from 'react-native';
import MapView,{Marker,PROVIDER_GOOGLE} from 'react-native-maps';
import Icon from 'react-native-vector-icons/FontAwesome5';
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,justifyContent: 'center',alignItems: 'center',},map: {
...StyleSheet.absoluteFillObject,});
export default function GoSendDestinationDetails() {
let coordinate = {
latitude: -6.1754,longitude: 106.8272,latitudeDelta: 0.015,longitudeDelta: 0.0121,};
const handleRegionChange = (region) => {
// console.log(region);
coordinate = region;
};
// console.log('re-render');
return (
<View style={{height: '100%',width: '100%'}}>
<View style={[styles.container,{height: '50%',width: '100%'}]}>
<MapView
provider={PROVIDER_GOOGLE} // remove if not using Google Maps
style={styles.map}
initialRegion={coordinate}
onRegionChange={handleRegionChange}>
<Marker coordinate={coordinate} />
</MapView>
{/* TODO: use gojek assets */}
<Icon name="map-marker-alt" size={36} color="orange" />
</View>
</View>
);
}
解决方法
您应在带有所需坐标的标记内使用图标:
<Marker coordinate={coordinate}>
<Icon name="map-marker-alt" size={36} color="orange" />
</Marker>
这将使图标保持在您需要的位置。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。