react-native-maps：如何在按钮按下时跟随用户位置

Question

我正在使用react-native-maps并且效果很好。 但我有两个问题。

1. 我可以使用followsUserLocation自动跟踪用户位置，但是当我移动地图时，它会不断将我拖回用户位置。 我该如何解决这个问题？

2. 我想要刷新按钮，当用户按下按钮时，我希望我的地图视图跟随用户位置。

    constructor() { super(); this.state = { followsUserLocation: true, }; } mapView() { return( <MapView style={styles.map} showsUserLocation followsUserLocation={this.state.followsUserLocation} initialRegion={{ latitude: 37.523814, longitude: 126.927494, latitudeDelta: 0.0922, longitudeDelta: 0.0421}}/> ) }

任何意见或建议将不胜感激！ 提前致谢！

Answer 1

尝试onUserLocationChange回调并使用setState相应地设置您的区域

   state = {
    showsUserLocation: true,
    followsUserLocation : true,
    mapRegion: {
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    },
  };

    <MapView
            style={{ flex: 1 }}
            region={this.state.mapRegion}
            //use this callback to update the regions
            onUserLocationChange={event => console.log(event.nativeEvent)}
            showsUserLocation={this.state.showsUserLocation}
            followsUserLocation={this.state.followsUserLocation}
          />

Answer 2

如果你正在使用 Reack Hook，你可以创建一个var而不是 useState。 在我的情况下，为了防止应用程序在三元条件下崩溃。

  var liveMap = {
mapRegion: {
  latitude: lattitude ? lattitude : 19.88134866090193,
  longitude: longitude ? longitude : 73.97658792586263,
  latitudeDelta: 0.0022,
  longitudeDelta: 0.0021,
},



     <MapView
        mapType="satellite"
        style={{ height: 400, width: "100%" }}
        showsUserLocation={false}
        zoomEnabled={true}
        zoomControlEnabled={true}
        followsUserLocation={true}
        // onUserLocationChange={(event) => console.log("this is event",event.nativeEvent)}
        showsUserLocation={true}
        followsUserLocation={true}
        region={liveMap.mapRegion}
        // initialRegion={{
        //   latitude: lattitude ? lattitude : 19.88134866090193,
        //   longitude: longitude ? longitude : 73.97658792586263,
        //   latitudeDelta: 0.0022,
        //   longitudeDelta: 0.0021,
        // }}
      >
        <Marker
          coordinate={{
            latitude: lattitude ? lattitude : 19.88134866090193,
            longitude: longitude ? longitude : 73.97658792586263,
          }}
          title={"JavaTpoint"}
          description={"Java Training Institute"}
        />
      </MapView>