Javascript 按标记器上的React native maps重新渲染器

我遇到了一个关于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>
    });
  }

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 press上，我都会用Marker的latlng更新状态，并用被按下的Marker的latlng作为地图的中心重新命名地图

---

它感觉很粗糙，而且不完美。我不能使用

animatetoregion

方法：当我更新状态时，MapView会重新渲染并剪切动画。

好的，我觉得自己很傻

答案一直就在那里。我在使用

region

prop时犯了一个错误，当时我应该在MapView组件上使用

initialRegion

（我没有在问题中包括：/），根据文档，该组件仅在组件已安装时使用：

---

在安装组件后更改此道具不会导致区域更改。

好的，我觉得很傻

答案一直就在那里。我在使用

region

prop时犯了一个错误，当时我应该在MapView组件上使用

initialRegion

（我没有在问题中包括：/），根据文档，该组件仅在组件已安装时使用：

---

在组件安装后更改此道具不会导致区域更改。

在我的情况下，我使用Callout来更改单击标记时所做的操作。可以使用useEffect进行渲染。并用delta传递选定的lat long。你能解释一下情况吗？我想你是从某个地方来到MapScreen的，你有一个选定的数据lat long Id，你必须突出显示这个。正确吗？场景如下：当我按下标记时，我想突出显示它（使用不同的图像和样式）。我已经用一种黑客的方式做了（见我的编辑），我正在寻找一个干净的解决方案。当我点击marker时，我在我的案例中做了什么。我在点击maeker时显示一个工具提示。我可以分享你的详细信息。

onPressMarker（e，index）{setState（{selectedMarkerIndex:index}）}YourList.map（（m，I）=>this.onPressMarker（e，I）}image={this.state.selectedMarkerIndex==I？selectedMarker:marker}//这是博客的关键所在//

你可以使用..callOut是marker内部的一种定制marker的方法在我的案例中，我使用了callOut。你可以使用useEffect进行渲染。并用delta传递所选的lat long。你能解释一下场景吗？我想你是从某处来到MapScreen的，你已经e选定的数据lat long Id，您必须高亮显示。对吗？场景如下：当我按下标记时，我想高亮显示它（使用不同的图像和样式）。我已经完成了（请参见我的编辑）我在寻找一个干净的解决方案。我在点击marker时做了什么。点击maeker时我会显示一个工具提示。我可以分享你的详细信息。

onPressMarker（e，index）{setState（{selectedMarkerIndex:index}）；}YourList.map（（m，I）=>this.onPressMarker（e，I）}图像={this.state.selectedMarkerIndex==i？selectedMarker:marker}//这是博客的关键所在//>

您可以使用..callOut是marker内部的方法来定制标记

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