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

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 钩子，因此重新渲染视图。这对我来说是一个问题，因为整个地图重新渲染（=它使地图重新回到用户位置的中心）并导致地图滞后。

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

有任何想法吗？

Answer 1

好吧，我真的觉得自己很傻。答案一直就在那里。当我应该在 MapView 组件上region使用时（我没有包含在问题中：/），我使用 prop 时犯了一个错误，根据文档，它仅在组件安装时使用：initialRegionChanging this prop after the component has mounted will not result in a region change.