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) {&nbsp; // Better loading logic here&nbsp; return <Text>Loading...</Text>}return (&nbsp; <MapView&nbsp;&nbsp; &nbsp; style={styles.map}&nbsp; &nbsp; initialRegion={{&nbsp; &nbsp; &nbsp; latitude: posts.lat,&nbsp; &nbsp; &nbsp; longitude: posts.lng,&nbsp; &nbsp; &nbsp; latitudeDelta: 0.04,&nbsp; &nbsp; &nbsp; longitudeDelta: 0.05,&nbsp; &nbsp; }}&nbsp; >&nbsp; </MapView>);第二种选择：// You need to add region to state.getPosts() {&nbsp; &nbsp; axios&nbsp; &nbsp; &nbsp; .get('myAPI')&nbsp; &nbsp; &nbsp; .then(response => {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; post: response.data,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; region: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; latitude: response.data.lat,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; longitude: response.data.long,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; latitudeDelta: 0.04,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; longitudeDelta: 0.05,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loading: false&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; });}render() {&nbsp; return (&nbsp; &nbsp; <MapView&nbsp;&nbsp; &nbsp; &nbsp; style={styles.map}&nbsp; &nbsp; &nbsp; initialRegion={{&nbsp; &nbsp; &nbsp; &nbsp; latitude: posts.lat,&nbsp; &nbsp; &nbsp; &nbsp; longitude: posts.lng,&nbsp; &nbsp; &nbsp; &nbsp; latitudeDelta: 0.04,&nbsp; &nbsp; &nbsp; &nbsp; longitudeDelta: 0.05,&nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; region={this.state.region}&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; </MapView>&nbsp; );}加分项：如果您使用animateToRegion. https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md#methods希望这可以帮助！

Answer 2

我以前遇到过这个问题，我像这样修复了它们。首先，您应该在导航到地图视图之前获取远程数据。并且您应该使用道具或导航参数将 latlng 数据发送到 MapView。其次，您应该initialRegion通过传递的数据进行设置。