Question

我已经和这段代码打了很长时间了。只有在使用Android＆＃39;多任务器之后，我才能将谷歌地图加载到这一点。

该页面以白色背景启动：as seen here

然后在按下右下角的按钮后，要切换应用，它会加载： Google Maps loaded

但是，如果我拖到另一个地方，我需要在它之前再次切换应用程序。某种静态更新。不知道为什么..

这是第二页，如果我回到应用的第一页，谷歌地图会回到白色背景。我已经尝试将谷歌地图页面放到第一页，但这并没有解决任何问题。

我现在正在使用的代码：

  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)) {

你会很高兴。

React-native：Google地图仅静态加载

1 个答案: