反应原生地图在标记按下时重新渲染答案

【问题标题】：React native maps rerender on marker press反应原生地图在标记按下时重新渲染
【发布时间】：2021-03-02 22:57:49
【问题描述】：

我在使用 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}。

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

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

【问题讨论】：

就我而言，我在单击 Marker 时所做的事情是使用 Callout 。您可以使用 useEffect 进行渲染。并通过 delta 传递选定的 lat long。你能解释一下这个场景吗？我认为您是从某个地方来到 MapScreen 的，并且您选择了 lat long Id 的数据，并且您必须突出显示这一点。对吗？
场景如下：当我按下标记时，我想突出显示它（使用不同的图像和样式）。我已经以一种 hacky 的方式完成了它（请参阅我的编辑），我正在寻找一个干净的解决方案。
当我点击标记时我做了什么。我在点击 maeker 时显示一个工具提示。我可以分享你的详细信息。
onPressMarker(e, index) { setState({selectedMarkerIndex: index}); } YourList.map((m, i) => <MapView.Marker coordinate={m.latLong} title={m.title} description={m.description} key={marker-${i}} onPress={(e) => this.onPressMarker(e, i)} image={this.state.selectedMarkerIndex === i ? selectedMarker : marker} // this is the crux of the blog />
您可以使用 ..callOut 是标记内的方法来自定义标记

标签： javascript react-native expo react-native-maps

【解决方案1】：

好吧，我觉得我很傻。

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

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

【讨论】：

谢谢伙计！你是救生员！