如何在react-native-maps中刷新地图？

Question

我在位置跟踪应用程序中使用了react-native-maps。现在我想清除(刷新)地图与所有的标记和折线，而不刷新react组件，当用户停止位置跟踪(使用一个按钮).Is时，有什么方法可以做到吗？

Answer 1

在某些情况下，如果您希望在react中更改组件上的可见内容，除了重新呈现您的组件之外，没有其他方法。

我不知道react-native-maps，但我认为这个问题可以用一般的react知识来解决。

react-native-maps中的标记和多边形是作为MapView的子项添加的，因此根据您存储标记/线的方式，您应该能够简单地依赖react的状态或道具更改来更新您的MapView。

例如，如果您的标记存储在组件的状态中，您可以这样做：

class MyLocationTracker extends React.Component {
  state = { markers: [{ latlng: { latitude: 1, longitude: 1 } }] }

  render = () => {
    return (
      <View>
        <Text onPress={() => this.setState({ markers: [] })}>Reset markers</Text>
        <MapView>
          {this.state.markers.map((marker) => <Marker coordinate={marker.latlng} />)}
        </MapView>
      </View>
    )
  }
}

当state发生变化时，react将再次调用render()函数并更新标记。请注意，这也将读取<MapView />组件。如果希望避免重新呈现<MapView />组件，可以将逻辑移动到仅处理标记的新组件，如下所示：

class MyLocationTracker extends React.Component {
  render = () => {
    return (
      <View>
        <Text onPress={this.markers.reset}>Reset markers</Text>
        <MapView>
          <MyMarkers ref={(comp) => { this.markers = comp }} />
        </MapView>
      </View>
    )
  }
}

class MyMarkers extends React.Component {
  state = { markers: [{ latlng: { latitude: 1, longitude: 1 } }] }

  reset = () => {
    this.setState({ markers: [] })
  }

  render = () => {
    return (
      <View>
        {this.state.markers.map((marker) => <Marker coordinate={marker.latlng} />)}
      </View>
    )
  }
}

同样，状态的更改将触发组件的重新呈现。但现在，因为只有<MyMarkers />的状态改变，它将重新呈现自己，而不是其他任何东西。

我希望这能有所帮助:)