javascript - 如何在 React Native Android 中实现谷歌地图 (React-Native-Maps)

Question

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

我已经完成了所有的灌注步骤，但我仍然收到一个空白屏幕(整个 React 屏幕是白色的，就像没有任何渲染一样)。

但是，当我尝试在 react 中呈现一个元素时，会弹出文本。因此，我的 map 没有显示是我实现库的结果，而不是 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

我还在 Google 开发人员控制台上检查了我对 API key 的权限，但我仍然无法显示我的 map (它说它正在接收 API 请求)。那么有谁知道如何在我的应用程序中实现谷歌地图？

Answer 1

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

• 弹性
• 高度和宽度
• 右边和底部