Question

我在位置跟踪应用程序中使用了react-native-maps。现在我想用所有标记和折线清除（刷新）地图而不刷新react组件，当用户停止位置Tracking（使用按钮）时，有什么办法吗？

Answer 1

在某些时候，如果您希望更改react中组件上可见的内容，除了重新渲染组件，别无其他方法。

我不认识react-native-maps，但我认为可以使用常规反应知识来解决此问题。

react-native-maps中的标记和多边形被添加为MapView的子代，因此，根据存储标记/线的方式，您应该能够仅依靠react的状态或props更改更新您的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 />的状态发生变化，它将重新呈现自身，但不会重新呈现任何其他内容。

我希望能对您有所帮助：）

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

1 个答案: