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;

代码似乎应该可以工作，因为我直接从一个例子中直接看了。我甚至从谷歌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链接到我的存储库，以防任何人愿意在他们的问题上复制问题，看看我的问题是什么......

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

您只是使用styles样式创建map变量，但您没有将该样式应用于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

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

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

帮我修好了。不知道如何因为两者具有相同的设置..不再有带有 Google 图标的灰屏！

Answer 4

激活“ Android版Maps SDK”和“ iOS版Maps SDK”

转到Google Cloud Platform控制台。 https://cloud.google.com/console/google/maps-apis/overview
通过顶部导航栏中的下拉菜单选择项目。
单击菜单，然后转到“ API和服务”>“库”
激活“ Android版Maps SDK”和“ iOS版Maps SDK”。
然后创建新的API密钥，并将其添加到AndroidManifest.xml标签内的<application>中的项目中：

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

react-native maps没有为android加载（空白地图）

4 个答案: