Question

我有一个MapView，我试图关注用户的当前位置。现在我记录位置，并记录currentRegion状态。我的问题是组件在日志中显示空数组，在循环渲染后，它将状态设置为位置坐标，以便MapView将我显示在海洋中间的某个位置。为什么不是initialRegion抓住改变的状态并渲染？

 const screen = Dimensions.get('window');
    const ASPECT_RATIO = screen.width / screen.height;

    var LATITUDE_DELTA = 0.3022;
    var LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

    class MapScreen extends Component {
      constructor(props) {
        super(props)
        this.state = {
          currentRegion: []
        }
      }

      componentDidMount() {
        navigator.geolocation.getCurrentPosition(
          (position) => {
            console.log(position)
            this.setState({ currentRegion: {
              latitude: position.coords.latitude,
              longitude: position.coords.longitude,
              latitudeDelta: LATITUDE_DELTA,
              longitudeDelta: LONGITUDE_DELTA
            }})
          },
          (error) => alert(error.message),
          {timeout: 20000, maximumAge: 1000}
        )
      }

      render () {
        console.log(this.state.currentRegion)
        return(

          <View style={styles.container}>
            <MapView
              showsUserLocation = {true}
              style={styles.map}
              initialRegion={this.state.currentRegion}
            />
          </View>
        )
      }
     }

Answer 1

initialRegion道具在安装后更改其道具时不会更新该区域。根据定义，它仅仅是最初的起点这在MapView道具下的文档中提到： https://github.com/airbnb/react-native-maps/blob/master/docs/mapview.md

因为在更新状态之前MapView正在挂载，所以它使用空数组。尝试使用ComponentWillMount（）而不是ComponentDidMount（），以便更快地进行状态更改。如果这不起作用，您还可以尝试在构造函数中设置当前位置。

Answer 2

initialRegion状态应该是一个对象。您已将其保存为您所在州的阵列。

constructor(props){
    super(props);
    this.state = {
        currentRegion: {
            latitude: LATITUDE,
            longitude: LONGITUDE,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA,
        }
    }
}

Answer 3

经过大量搜索，我终于找到了解决方案。每次都对我有用。

只需将“ initialRegion”替换为“ region”。

在MapView组件中使用state和initialRegion来反应Native问题

3 个答案: