在标记按下时反应本机地图重新渲染

Question

我在使用 React 本机地图时遇到问题。我尝试在我的地图上放置标记，并突出显示按下的标记。我认为这不会那么棘手:)

这是我渲染标记的方式：

function renderMarkers() {
    const shopsFiltered = shops.filter((shop) => {      
      return shop.hasOwnProperty('latitude') && shop.hasOwnProperty('longitude') && shop.latitude && shop.longitude
    });
    return shopsFiltered.map((shop) => {
      
      const isInWallet = cards.data.filter(card => {
        return card.hasOwnProperty('company') && shop.hasOwnProperty('company') && card.company.objectId === shop.company.objectId;
      }).length;
      const isCurrentMarker = shop.company.objectId === currentMarkerCardId;
      const latLng = { latitude: shop.latitude, longitude: shop.longitude };
      return <Marker  
        key={shop.objectId}
        coordinate={latLng}
        onPress={() => onMarkerPress(shop.company.objectId)}
      >
        {isCurrentMarker && // I had to do this, since the dimensions weren't updated using style prop...
          <Image
            source={isInWallet ? require('../assets/images/explorer/pin-on.png'):require('../assets/images/explorer/pin-off.png')}
            style={styles.mapMarkerCurrent }
            resizeMode="cover"
            resizeMethod="resize"
          />
        }
        {!isCurrentMarker &&
          <Image
            source={isInWallet ? require('../assets/images/explorer/pin-on.png'):require('../assets/images/explorer/pin-off.png')}
            style={styles.mapMarker}
            resizeMode="cover"
            resizeMethod="resize"
          />
        }

      </Marker>
    });
  }

当我按下标记时：

function onMarkerPress(id) {
  setBottomBoxOpacity(1);
  setCurrentMarkerCardId(id);
}

setCurrentMarkerCardId 是一个 useState 挂钩，因此会重新呈现视图。这对我来说是个问题，因为整个地图重新渲染（= 它使地图重新居中于用户的位置）并导致地图滞后。

然而，我看到了问题，但我不知道如何在不重新渲染整个地图的情况下更新按下的标记值。

有什么想法吗？

编辑：

仍在使用我的组件状态，我可以破解这张地图：

function onMarkerPress(id, coordinate) {
    setBottomBoxOpacity(1);
    setCurrentMarkerCardId(id);
    setMapState({
      ...mapState,
      region: {
        ...mapState.region,
        latitude: coordinate.latitude,
        longitude: coordinate.longitude
      }
    })
  }

而且我必须在 MapView 组件上设置 moveOnMarkerPress={false}。

因此，基本上，在每次按下 Marker 时，我都会使用 Marker 的 latlng 更新状态，并使用用作地图中心的按下的 Marker 的 latlng 重新渲染地图。

感觉很老套，也不完美。我不能使用 animatetoregion 方法：当我更新状态时，MapView 重新渲染并剪切动画。

Answer 1

好吧，我感觉真的很傻。

答案一直就在那里。我在使用 region prop 时犯了一个错误，当我应该在 MapView 组件上使用 initialRegion（我没有包括在问题中 :/）时，根据文档仅在组件已安装：

Changing this prop after the component has mounted will not result in a region change.

在标记按下时反应本机地图重新渲染

React native maps rerender on marker press

javascript

react-native

react-native-maps

expo