React-native：Google地圖僅靜態加載

Question

我已經在這段代碼中使用了很長時間了。 僅在使用Android的“多任務處理程序”后，我才知道它已經加載了Google地圖。

該頁面以白色背景開頭： 如此處所示

然后，按下右下角的按鈕以切換應用程序后，它會加載：已加載Google Maps

但是，如果我拖到另一個地方，則需要再次進行應用切換。 某種靜態更新。 不知道為什么。

這是第二頁，如果我返回到該應用程序的第一頁，則Google地圖將返回白色背景。 我曾嘗試將google maps頁面制作為首頁，但這也無法解決任何問題。

我現在正在使用的代碼：

  import React, { Component } from 'react';
  import MapView from 'react-native-maps';
  import { AppRegistry, View, StyleSheet, Dimensions } 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 Additional extends React.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('Additional', () => Additional);

  export default Additional;

有誰知道使這項工作像正常的google-maps組件那樣的答案？

提前致謝！

編輯：我已經嘗試了一個新的React-Native項目，但是完全相同的事情發生了。 任何人都有意見嗎？ 謝謝！

Answer 1

問題在於react-native-maps。

在// lib / android / src / main / java / com / airbnb / android / react / maps / AirMapView.java中

if (!contextHasBug(appContext.getCurrentActivity())) {
   superContext = appContext.getCurrentActivity();
} else if (contextHasBug(superContext)) {

進入：

if (contextHasBug(superContext)) {

而且您會很好。