谷歌地图未在本机反应中显示，只有谷歌徽标可见

Question

我分配了正确的 Api 密钥，为什么地图没有显示？我 App.js 代码

import MapView from 'react-native-maps';

export default function App() {
  return (
    <View style={styles.container}>
     <MapView 
    initialRegion={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
  />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

我的安卓模拟器显示了这个结果

Answer 1

将样式添加到 MapView 并给出 absoluteFillObject。

MapView: {
    ...StyleSheet.absoluteFillObject,
    top: 10, //depends on your screen
    backgroundColor: 'transparent',
  }

Answer 2

我在示例项目中尝试了以下内容。请尝试这样 -

const App = () => {return (
  <MapView
      style={{flex: 1}}
      provider={PROVIDER_GOOGLE}
      minZoomLevel={6}
      onMapReady={() => {}}
  >
  
  </MapView>);};

如果这对你有用，请告诉我。

Answer 3

@ReactDev 你能试试这个代码吗？

import React from 'react';
import { StyleSheet, View, Dimensions } from 'react-native';

import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';

const { width, height } = Dimensions.get('window');

const ASPECT_RATIO = width / height;
const LATITUDE = 37.78825;
const LONGITUDE = -122.4324;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;


render() {
  return (
    <View style={styles.container}>
        <MapView
          provider={PROVIDER_GOOGLE}
          style={styles.map}
          initialRegion={{
            latitude: LATITUDE,
            longitude: LONGITUDE,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA,
          }}
        />
      </View>
  );
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});