反应原生地图不加载为Android（空白地图）

问题描述：

我一直在这个很长一段时间现在，我开始思考也许反应原生地图不能在Android模拟器上工作，因为所有的答案，我觉得似乎无论如何，工作都是为了IOS。反应原生地图不加载为Android（空白地图）

我目前使用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

我只需要加载地图。该代码看起来像它应该工作，但地图不会加载...

我会给任何人谁可以帮助我一个赏金。

尝试'container' style with'container：{flex：1，justifyContent：'flex-end'， alignItems：'center'，}。 –

@ubatin我试过这个。看起来地图根本就没有加载... – Bolboa

你是否尝试在google api控制台上删除api密钥的签名？我的意思是包名和SHA1密钥。它是调试密钥和释放密钥的问题。我只是问你是否考虑过这种方法？ –

答

给款式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, 
    },

@Bolboa：你有试过这个解决方案吗？ –

对不起，我一直忙于其他工作，但今天我会试一试:) – Bolboa

答

你只创建与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节你错过了包括第二部分。
如果即使在添加样式后无法看到地图，您的密钥也会出现问题。

反应原生地图不加载为Android（空白地图）

相关推荐