如何在 React Native Android 中实现谷歌地图（React-Native-Maps）答案

【问题标题】：How to Implement Google Map in React Native Android (React-Native-Maps)如何在 React Native Android 中实现谷歌地图（React-Native-Maps）
【发布时间】：2016-07-25 20:08:45
【问题描述】：

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

我已经完成了所有的灌输步骤，但我仍然收到一个空白屏幕（整个反应屏幕都是白色的，就像没有渲染一样）。

但是，当我尝试在 react 中渲染元素时，会弹出文本。因此，我的地图没有显示是因为我实现了库而不是 react 的问题。

这是我的 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

我还在谷歌开发者控制台上检查了我的 API 密钥权限，但我仍然无法显示我的地图（它说它正在接收 API 请求）。那么有人知道如何在我的应用程序中实现谷歌地图吗？

【问题讨论】：

是模拟器还是真机？
在真实设备上。有什么区别？
在模拟器上运行地图你还必须安装Google Play services。您是否在运行应用程序时尝试登录？在终端的一个选项卡中运行以下代码 adb logcat '*:S' ReactNative:V ReactNativeJS:V -d > Desktop/log.txt 并从另一个选项卡运行您的应用程序。

标签： javascript android google-maps react-native

【解决方案1】：

地图组件没有获得任何可用于确定其大小的属性。因此它是 0x0 像素大并且不可见。为了解决这个问题，您需要将这些属性之一添加到styles.map：

弹性
高度和宽度
右下角

【讨论】：

是的，例如设置。 MapView 上的 flex: 1 应该可以工作。
谢谢！对于其他任何人，您必须删除标签并将宽度和高度设置为 null 以使地图变为全屏。