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 上测试