时间戳

首页 > 解决方案 > 如何调整已使用 `alignItems` 和 `justifyContent` 垂直和水平居中的组件的位置？

javascript - 如何调整已使用 `alignItems` 和 `justifyContent` 垂直和水平居中的组件的位置？

问题描述

我的目标是调整Icon组件以指向确切的坐标。当前的解决方案确实使Icon组件垂直和水平居中。Marker但与组件相比，它不够精确。

当前的解决方案是向 Icon 组件添加样式，top=-20但我认为这不是正确的解决方案。我相信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>
  );
}

标签： javascriptreact-nativereact-native-maps

解决方案

您应该使用带有所需坐标的标记内的图标：

<Marker coordinate={coordinate}>
  <Icon name="map-marker-alt" size={36} color="orange" />
</Marker>

这将使图标保持在您需要的位置。

推荐阅读