在android设备上反应原生地图为空白



React native在我的android设备上是空白的。这只是一个带有谷歌标志的灰色屏幕。与React原生地图不同的是,空白页面只有谷歌标志,它是在模拟器上工作的,但不是在真实的设备上。

我在网上搜索了这个问题:

  • API应该很好
  • 样式表可以
  • 它正在genymotion模拟器上工作
  • 在android虚拟设备上工作

    在Expo上做得很好,但当我从playstore下载应用程序时就不行了。AndroidManifest.xml中的元数据如下所示:

    这就是地图视图的样子:

    ` <MapView
    showsUserLocation={false}
    style={styles.map}
    provider='google'
    ref={ref => { map3 = ref; }}
    onMapReady = { this.onMapReady }
    initialRegion={this.state.region}
    >
    <Marker 
    image={logo}
    coordinate={this.state.coordinate}
    />
    </MapView>`
    

。。风格:

`const styles = StyleSheet.create({
mapContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
},
map: {
flex: 1,
borderRadius: 4,
width,
height,
zIndex: 1,
},`

如果其他一切都失败了,就像我的情况一样,不要忘记基本的东西。原来我没有在控制台中启用"Android地图SDK"。developers.google.com

在我的情况下,我没有在主视图组件中添加stlye,而MAPVIEW在主应用程序视图之外进行渲染。此外,在MAPVIEW中添加文本只是为了测试它是否渲染了任何文本?,当它渲染文本时,它用很小的一行显示地图,所以我知道这是一个风格问题。所以在我的视图中添加了样式,styles.container:

<View style={styles.container}>
<MapView 
style={styles.map} 
initialRegion={{
latitude:this.state.latitude,
longitude:this.state.longitude,
latitudeDelta: 1,
longitudeDelta: 1,
}}>
</MapView>
<Text>{this.state.latitude, this.state.longitude}</Text>
</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,
left: 0,
right: 0,
bottom: 0,
},
});

我认为您已经启用了Google Play的应用程序签名服务。问题在于expo应用程序和独立应用程序之间的散列不同。

转到播放控制台->您的应用程序->发布管理->应用程序签名,然后转到API仪表板->凭据并将签名添加到现有凭据。

我也得到了同样的错误。经过检查,这是我的错。添加样式标签工作

{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}

可能的解决方案:

  • 确保"Google Maps Android API v2"已启用

转到谷歌控制台->api和服务->面板->启用api和服务>选择谷歌地图

不要忘记添加provider={PROVIDER_GOOGLE}我的代码缺少提供程序。正如我所补充的,地图加载成功。

import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';
<MapView
style={styles.mapcontainer}
provider={PROVIDER_GOOGLE}
region={{
latitude: 42.882004,
longitude: 74.582748,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
zoomEnabled={true}
showsUserLocation={true}
/>

此外,请检查您的GPS或互联网连接是否已打开。我在开发模式中遇到了同样的问题,花了几分钟才发现我没有启用互联网连接或GPS。

首先,使用取消本地映射库的链接

react-native unlink react-native-maps

然后清理您的构建项目:

cd android
gradlew clean

最后,再次构建项目并在Android设备上运行:

npx react-native run-android

在React Native 0.61 上测试

相关内容

  • 没有找到相关文章

最新更新