React Native Map View 初始渲染

Question

我正在通过以下屏幕为单个帖子加载带有标记的地图。下面的这段代码很完美，它在地图上显示标记，并且地图视图圆圈也出现在与标记相同的位置。问题：我想将 initialRegion 设置为标记坐标，以便地图位于标记所在的正确位置。我试过用posts.lat 和posts.lng 设置initialRegion 纬度和经度，就像我对mapview 圆所做的那样，但这不适用于初始区域。只有一个标记从 API 加载，因为这是一个单独的帖子屏幕componentDidMount() {    this.getPosts();  }  getPosts() {    axios      .get('myAPI')      .then(response => {        this.setState({          post: response.data,          loading: false        });      });}render() {const posts = (this.state ?? this.state.posts) ? this.state.posts :     return (      <MapView style={styles.map}              initialRegion={{                  latitude: 43.660192,                  longitude: -79.425250,                  latitudeDelta: 0.04,                  longitudeDelta: 0.05,              }}            ><MapView.Marker key={posts.id} coordinate={{latitude: posts.lat, longitude: posts.lng}} /><MapView.Circle            center={{              latitude: posts.lat,              longitude: posts.lng,            }}            radius={150}            strokeWidth={2}            strokeColor="#3399ff"            fillColor="rgba(102,204,153,0.2)" />          </MapView>);  }

Answer 1

问题是，目前，您的地图将在您为 pin 坐标发出 API 请求之前呈现。如果这是使用 react-native-maps，他们的文档指出在初始渲染后更改 initialRegion 不会导致地图更改：

在组件安装后更改 [the initialRegion] 属性不会导致区域更改。 https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md

您需要：

等到您有 API 响应来渲染地图，或者

使用初始区域的估计值渲染地图，并在 API 调用完成且状态更新后更新地图位置。

选项1：

if (this.state.loading) {

  // Better loading logic here

  return <Text>Loading...</Text>

}

return (

  <MapView 

    style={styles.map}

    initialRegion={{

      latitude: posts.lat,

      longitude: posts.lng,

      latitudeDelta: 0.04,

      longitudeDelta: 0.05,

    }}

  >

  </MapView>

);

第二种选择：

// You need to add region to state.

getPosts() {

    axios

      .get('myAPI')

      .then(response => {

        this.setState({

          post: response.data,

          region: {

            latitude: response.data.lat,

            longitude: response.data.long,

            latitudeDelta: 0.04,

            longitudeDelta: 0.05,

          }

          loading: false

        });

      });

}

render() {

  return (

    <MapView 

      style={styles.map}

      initialRegion={{

        latitude: posts.lat,

        longitude: posts.lng,

        latitudeDelta: 0.04,

        longitudeDelta: 0.05,

      }}

      region={this.state.region}

    >

      ...

    </MapView>

  );

}

加分项：如果您使用animateToRegion. https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md#methods

希望这可以帮助！

Answer 2

我以前遇到过这个问题，我像这样修复了它们。

首先，您应该在导航到地图视图之前获取远程数据。
并且您应该使用道具或导航参数将 latlng 数据发送到 MapView。

其次，您应该initialRegion通过传递的数据进行设置。