获取地理位置后，React-Native-Maps 似乎不会重新呈现

Question

我正在尝试创建一个加载 google 地图（使用 airbnb 的 react-native-maps 库）并显示用户当前位置的简单应用。我看到的是地图始终显示默认初始位置，而不是在获取用户位置后重新渲染。

我正在使用 React 0.42 并且仅在 iOS 上进行测试。这里有一些代码来澄清：

1.) 我设置了一个初始状态

state = {
      region: {
        latitude: 52,
        longitude: 5,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421
      }
  }

2.) 我在 componentDidMount

中获取了用户的位置

componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          region: {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            latitudeDelta: 0.01,
            longitudeDelta: 0.0011
          }
        });
      },
      (error) => alert(JSON.stringify(error)),
      {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
    );
  }

3.) 通过渲染，我显示带有初始区域的地图，并期望在获取用户位置后该区域会发生变化

render() {
    return (
     <View style={{ flex: 1 }}>
       <View style={{backgroundColor: 'coral', height: 70, justifyContent: 'center', alignItems: 'center'}}>
         <Text>
            <Text>longitude: {this.state.region.longitude}</Text>
            <Text>latitude: {this.state.region.latitude}</Text>
        </Text>
       </View>
       <View style={styles.container}>
         <MapView
           provider={PROVIDER_GOOGLE}
           style={styles.map}
           initialRegion={this.state.region}
           region={this.state.region}
           onRegionChange={this.onRegionChange}
           onRegionChangeComplete={this.reloadEntities}
         />
       </View>
     </View>
   );
 }

这里是 onRegionChange，只是用新区域更新状态，我相信这会导致重新渲染

onRegionChange = (region) => {
  this.setState({ region });
}

注意：经度和纬度文本值会随着地图上区域的变化而更新，一旦获取用户的位置，它们就会更新。

所以我有点困惑，为什么在获取用户位置后地图不会改变它显示的内容。任何帮助将不胜感激！

更新：我看过这个帖子：https://github.com/airbnb/react-native-maps/issues/43，它似乎主要围绕 Android，但我确实尝试删除 enableHighAccuracy 选项，但没有成功。

Answer 1

您不应将 initialRegion 道具与 region 道具一起使用：

Use this prop instead of region only if you don't want to control the viewport of the map besides the initial region.

Source

删除 initialRegion 属性后它应该可以工作。

Answer 2

将 MapView 的 region 设置为您所在地区状态的值 this.state.region。

您需要获取当前位置并将其设置为区域，然后每次设备检测到位置发生变化时使用watchPosition函数获取坐标，这次设置新值到你的 region 状态。

这样就可以了

import React, { Component } from 'react';
import MapView from 'react-native-maps';
import { AppRegistry, View } from 'react-native';

const { width, height } = Dimensions.get('window');
const ASPECT_RATIO    = width / height;
const LATITUDE        = 37.78825;
const LONGITUDE       = -122.4324;
const LATITUDE_DELTA  = 0.0122;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const SPACE           = 0.01;

class Test extends Component {
  constructor() {
    super();
    this.state = {
      region: {
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA
      }
    }
  }

componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          region: {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA,
            accuracy: position.coords.accuracy
          }
        });
      },
      (error) => alert(error.message),
      {timeout: 10000}
    );

    this.watchID = navigator.geolocation.watchPosition((position) => {
      const newRegion = {
        latitude: position.coords.latitude,
        longitude: position.coords.longitude,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
        accuracy: position.coords.accuracy
      }
      this.setState({newRegion});
    });
  }

  componentWillUnmount() {
    navigator.geolocation.clearWatch(this.watchID);
  }

  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={styles.map}
          region={this.state.region}
          showsUserLocation={true}
          followUserLocation={true}>
        </MapView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

AppRegistry.registerComponent('Test', () => Test);

务必在 MapView 中启用 showsUserLocation 和 followUserLocation，这样应用程序会询问用户当前位置。

followUserLocation 取决于 showUserLocation.

恒定的经度和纬度仅作为示例。

希望对您有所帮助

Answer 3

摆脱掉 onRegionChangeComplete={this.reloadEntities} 也很重要。

每次区域更改时，react-native 都会重新加载并默认返回到您在构造函数中声明的初始状态。

获取地理位置后，React-Native-Maps 似乎不会重新呈现

React-Native-Maps don't seem to rerender once the geo location is acquired

react-native

react-native-maps