react-native maps没有为android加载(空白地图)

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,
  },