React Native Map View Начальный рендер

Question

Я загружаю карту с маркером из моего API для одного сообщения на следующем экране. Приведенный ниже код отлично работает, он отображает маркер на карте, и круг карты также появляется в том же месте, что и маркер.

Проблема: Я хочу установить initialRegion каккоординаты маркера, чтобы карта находилась в правильном месте, где находится маркер. Я попытался установить начальную и региональную широту и долготу с posts.lat & posts.lng, как я это делал с кругом просмотра карты, но это не работает с начальной областью.

Существует только ОДИН маркер, загруженный из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

Проблема в том, что в настоящее время ваша карта будет отображаться до того, как вы сделаете запрос API для координат булавки. Если для этого используются response-native-maps, в их документах указано, что изменение initialRegion после первоначального рендеринга не приведет к изменению карты:

Изменение реквизита [initialRegion] после монтирования компонентане приведет к изменению региона. https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md

Вам необходимо либо:

1. дождаться ответа API для рендеринга карты, либо
2. Рендеринг карты с помощьюугадать initialRegion и обновить положение карты после завершения вызова 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

Я уже сталкивался с этой проблемой раньше, и я исправил их следующим образом.

Сначала , вы должны получить удаленные данные, прежде чем перейти к представлению карты.
и вам следуетотправьте последние данные в MapView, используя реквизиты или параметры навигации.

Секунда , вы должны установить initialRegion по переданным данным.