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

【问题标题】：react-native-maps : How to follow user location on button pressreact-native-maps：如何在按钮按下时跟随用户位置
【发布时间】：2019-03-15 04:26:25
【问题描述】：

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

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

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

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}}/>
   )
}

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

【问题讨论】：

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

【解决方案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}
          />

【讨论】：

在回调中 onUserLocationChange 设置 followUserLocation = false

【解决方案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>

【讨论】：