React-Native-Maps 未在 Android 模拟器或真实设备上显示

Question

I added react-native-maps in my project and it doesn't showup

I am not able to figure out what I'm doing wrong

Things I have tried:

• Test the example app available on the official repo: https://github.com/react-native-maps/react-native-maps
• Followed all the instructions available in the installation guide and also tried many articles guiding through the installation process

Please review the code snippets below and let me know if you need code from any other files that are important to find the issue.

For some people it shows an empty map with white screen and Google logo at the bottom. I have nothing at all. Just blank screen.

Doesn't throw any error while compilation.

code in Maps.js

import React from "react";
import { StyleSheet, View } from "react-native";
import MapView, { PROVIDER_GOOGLE } from "react-native-maps";

const Maps = () => {
  return (
    <View style={styles.container}>
      <MapView
        styles={styles.map}
        provider={PROVIDER_GOOGLE}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
    </View>
  );
};

export default Maps;

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

\android\app\build.gradle file

dependencies {
   ...
   implementation(project(':react-native-maps')){
       exclude group: 'com.google.android.gms', module: 'play-services-base'
       exclude group: 'com.google.android.gms', module: 'play-services-maps'
   }
   implementation 'com.google.android.gms:play-services-base:17.2.1'
   implementation 'com.google.android.gms:play-services-maps:17.0.0'
}

\android\build.gradle

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "30.0.2"
        minSdkVersion = 21
        compileSdkVersion = 30
        targetSdkVersion = 30
        ndkVersion = "20.1.5948944"
        supportLibVersion = "28.0.0"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath('com.android.tools.build:gradle:4.2.1')
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

AndroidManifest.xml (Note: I have my API key and tested with the example project from the github repo and it worked)

<meta-data
     android:name="com.google.android.geo.API_KEY"
     android:value="I_ADDED_MY_KEY"/>

settings.gradle

include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')

package.json

{
  "name": "my-app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@react-native-async-storage/async-storage": "^1.15.9",
    "@react-native-community/checkbox": "^0.5.8",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/bottom-tabs": "^6.0.7",
    "@react-navigation/drawer": "^5.12.9",
    "@react-navigation/native": "^5.9.8",
    "@react-navigation/stack": "^5.14.9",
    "axios": "^0.21.4",
    "react": "17.0.1",
    "react-dom": "^16.8.0",
    "react-native": "0.64.2",
    "react-native-bootsplash": "^3.2.4",
    "react-native-confirmation-code-input": "^1.0.4",
    "react-native-device-info": "^8.1.3",
    "react-native-extra-dimensions-android": "^1.2.5",
    "react-native-fast-image": "^8.3.7",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-maps": "^0.29.3",
    "react-native-orientation-locker": "^1.3.1",
    "react-native-reanimated": "^2.2.0",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.7.0",
    "react-native-svg": "^12.1.1",
    "react-native-svg-transformer": "^0.14.3",
    "react-native-video": "^5.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/runtime": "^7.14.6",
    "@react-native-community/eslint-config": "^3.0.0",
    "babel-jest": "^27.0.6",
    "eslint": "^7.30.0",
    "jest": "^27.0.6",
    "metro-react-native-babel-preset": "^0.66.0",
    "react-test-renderer": "17.0.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

Answer 1

您必须为 MapView 创建一个宽度、高度的样式： 复制它： map: { width: Dimensions.get('window').width, height: Dimensions.get('window').height, }，它正在工作模拟器，但在真实设备中，我不确定。