Javascript 如何调整以“alignItems”和“justifyContent”垂直和水平居中的组件的位置？

我的目标是调整

图标

组件以指向精确的坐标。当前解决方案不会使

图标垂直和水平居中。但与
标记
组件相比，它不够精确

当前的解决方案是使用
top=-20
为图标组件添加样式，但我认为这不是正确的解决方案。我相信
top=-20
只针对我的设备，不同的设备会产生不同的结果

我曾尝试使用
标记
组件，但我没有弄清楚如何防止每次状态更新时重新渲染。注意：如果不重新渲染，标记将不会更改位置

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>
  );
}

从“React”导入React；
从“react native”导入{StyleSheet，View}；
从“react native maps”导入MapView，{Marker，PROVIDER_GOOGLE}；
从“react native vector icons/FontAwesome5”导入图标；
const styles=StyleSheet.create({
容器：{
…StyleSheet.absoluteFillObject，
为内容辩护：“中心”，
对齐项目：“居中”，
},
地图：{
…StyleSheet.absoluteFillObject，
},
});
导出默认函数GoSendDestinationDetails（）{
设坐标={
纬度：-6.1754，
经度：106.8272，
纬度德尔塔：0.015，
纵向德尔塔：0.0121，
};
常量HandlerRegionChange=（区域）=>{
//控制台日志（区域）；
坐标=区域；
};
//console.log（'re-render'）；
返回(
{/*TODO:使用gojek资产*/}
);
}
您应该使用标记内的图标和所需的坐标：

<Marker coordinate={coordinate}>
  <Icon name="map-marker-alt" size={36} color="orange" />
</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>



这将使图标保持在您需要的位置。
我的目标是在
地图视图中放置一个垂直和水平居中的
组件。我知道的更改标记坐标的方法需要
重新渲染
，在我的情况下，这将导致不必要的重新渲染。在512MB的Android应用程序中使用时，会出现明显的延迟。您知道在不重新渲染的情况下更改标记坐标的更好方法吗？不重新渲染就无法更改视图上的某些内容。可以优化渲染以提高性能。渲染的哪一部分要减慢？我的目标是在
地图视图中放置一个垂直和水平居中的
组件。我知道的更改标记坐标的方法需要
重新渲染
，在我的情况下，这将导致不必要的重新渲染。在512MB的Android应用程序中使用时，会出现明显的延迟。您知道在不重新渲染的情况下更改标记坐标的更好方法吗？不重新渲染就无法更改视图上的某些内容。可以优化渲染以提高性能。渲染的哪一部分要减慢？
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>
  );
}