如何调整以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>
  );
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）