android 未加载 react-native 地图（空白地图）

Question

我已经坚持这个很长时间了，我开始认为也许反应本机地图不能在 android 模拟器上工作，因为我发现似乎工作的所有答案都是 IOS 无论如何。

我目前正在使用 android 模拟器来运行我的应用程序。这是一个简单地图的代码...

class MainMap extends Component {
    constructor() {
    super();
  }
    render(){
        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: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    position: 'absolute',
    top: 0,
    width:150,
    height:150,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

module.exports = MainMap;

代码似乎应该可以工作，因为我直接从示例中获取了它。我什至从 google API 得到了我的 API 密钥，然后在我的 AndroidManifest.xml

中添加了以下内容

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

现在，当我运行 react-native run-android 时，应用程序似乎运行正常，没有错误消息。但是，该应用程序是空白的。 View 容器加载正常，但其内容 MapView 根本无法加载。我所看到的只是一个空白屏幕。

请注意，我的模拟器上也安装了 Google Play 服务和 Google API。

我没有收到任何错误消息，如何调试这个问题？ react-native maps 甚至可以在 android 模拟器上工作吗？

编辑

我已经坚持这个很长时间了，这让我无法从事我的这个项目。因为问题的性质很难调试，所以我将向我的存储库提供 github link 以防有人愿意在他们的末端复制问题并查看我的问题是什么...... .

https://github.com/Bolboa/TTC-Mapping

我只需要加载地图。代码看起来应该可以工作，但地图没有加载...

我将悬赏给任何能帮助我的人。

Answer 1

给 MapView 样式。

包括

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

在渲染方法中

<View style={styles.container}>
        <MapView style = {styles.mapcontainer}
          showsUserLocation={true}
          showsMyLocationButton={false}
          zoomEnabled = {true}
          region={this.state.region} >
        </MapView>
</View>

包括样式

container: {
    flex: 1,
  },
mapcontainer: {
    flex: 1,
    width: width,
    height: height,
  },

Answer 2

您只是创建了具有 map 样式的 styles 变量，但并未将该样式应用于 MapView。您需要添加以下行，它将样式分配给 MapView

style={styles.map}

所以现在看起来像

<View style={styles.container}>
    <MapView
        style={styles.map}
        initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
       }}/>
</View>

另请查看 troubleshooting 您错过的包含第二部分的部分。
如果即使在添加样式后您仍无法看到地图，则说明您的密钥有问题。

Answer 3

激活"Maps SDK for Android"和"Maps SDK for iOS"

转到 Google 云平台控制台。 https://cloud.google.com/console/google/maps-apis/overview
Select 您的项目在顶部导航栏中有下拉菜单。
单击菜单并转到 "APIs & Services" > "Library"
激活"Maps SDK for Android"和"Maps SDK for iOS"。
然后创建新的 API 密钥并将其添加到 <application> 标签内 AndroidManifest.xml 中的项目中：

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

Answer 4

出于某种原因，重新生成 API 密钥并将其更新到：

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

帮我修好了。不确定两者具有相同的设置。. 不再有带有 Google 图标的灰色屏幕！

android 未加载 react-native 地图（空白地图）

react-native maps not loading for android (blank map)

android

google-maps

react-native

react-native-android