如何在React Native Android中实现Google Map(React-Native-Maps)

Question

我一直在使用来自https://github.com/lelandrichardson/react-native-maps/blob/master/docs/installation.md的React-Native-Maps库.

我已经完成了所有的滴注步骤,但我仍然收到一个空白屏幕(整个反应屏幕都是白色的,就像没有渲染一样).

但是,当我尝试在反应中渲染元素时,会弹出文本.因此我的地图没有显示是我执行库而不是反应问题的结果.

这是我的index.android.js页面的代码

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import MapView from 'react-native-maps';

class roads extends Component {
  render() {
    return (
      <View style={styles.container}>
<MapView
style={styles.map}
    initialRegion={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
  />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
 map: {
    position: 'absolute',
    top: 0,
    left: 0,
  },
});

AppRegistry.registerComponent('roads', () => roads);

我也在手机上收到此错误消息

warning encountered 4 times.
Show Stacktrace
Unable to symbolicate stack trace: The stack is null

这是我发现的关于错误的最接近的线程,但它应该修复... https://github.com/facebook/react-native/issues/8311

我还在google开发者控制台上检查了我对API密钥的权限,但仍然无法显示我的地图(它表示它正在接收API请求).那么有谁知道如何将谷歌地图实施到我的应用程序？

Answer 1

Map组件未获取可用于确定其大小的任何属性.因此它是0x0像素大而不可见.要解决此问题,您需要将以下属性之一添加到styles.map:

• 柔性
• 高度宽度
• 右下角