如何在不重新渲染 mapview 的情况下更新标记位置？反应原生地图答案

【问题标题】：How do i update marker position without re rendering mapview ? React native maps如何在不重新渲染 mapview 的情况下更新标记位置？反应原生地图
【发布时间】：2018-08-30 23:00:12
【问题描述】：

我正在根据标记数组状态更新多个标记位置。所以当我用 setState 更新它时，渲染函数照常触发并且 mapview 重新渲染。由于它有一个初始区域和区域道具，它会根据玩家位置状态自动关注玩家位置（我不想要这个，我只想要在初始加载时这样做。）

如何在不重新渲染地图视图的情况下更新标记位置？

 render() {
    return (
      <MapView
        initialRegion={this.state.playerLocation}
        region={this.state.playerLocation}
        style={ styles.map }>
          {this.renderMarkers()}
       </MapView>
    );
  }

renderMarkers = () => {
  return(
    this.state.markers.map(marker=>{
      return(
        <Marker coordinate = {{
           latitude: marker.lat,
           longitude: marker.long
         }}      
         title={marker.id}/>
      )
  })
}

【问题讨论】：

标签： reactjs react-native react-native-maps

【解决方案1】：

这是react中很常见的问题，有很好的解决办法。

使用名为shouldComponentUpdate的生命周期方法

https://reactjs.org/docs/react-component.html#shouldcomponentupdate

您可以尝试将渲染标记提取到单独的组件中，然后添加生命周期以始终返回 False。那是一旦组件被安装，它就不会再次重新渲染。

我不确定这是否会导致您的情况出现任何回归，但如果确实如此，您可以传递一个可以在 SCU 中触发重新渲染的道具，并在需要时更新标记。这是你需要玩的东西。

【讨论】：