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

柯蒂斯·冲(Curtis Chong)

我一直在使用来自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

我还检查了我在Google Developers Console上的API密钥的权限,但仍然无法显示我的地图(它表示它正在接收API请求)。那么,有谁知道如何在我的应用程序中实现google maps?

丹尼尔·施密特(Daniel Schmidt)

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

  • 柔性
  • 高度宽度
  • 右下

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在React Native中安装React Native Maps?

来自分类Dev

React Native:添加Google Maps SDK

来自分类Dev

从react-native-maps启动Google Maps应用

来自分类Dev

如何在React Native Map中更改标记的大小?

来自分类Dev

React Native Maps followUserLocation坐标

来自分类Dev

如何在 react-native 中使用 react-native -maps

来自分类Dev

React-native Airbnb-Maps:如何在 airbnb 地图弹出框中呈现按钮?

来自分类Dev

无法在React Native WebView中打开Google Maps

来自分类Dev

无法在React Native WebView中打开Google Maps

来自分类Dev

在React-Native Android中实现ImagePicker

来自分类Dev

如何在React Native中优化图像

来自分类常见问题

如何在React Native中禁用旋转?

来自分类Dev

如何在React Native中渲染对象?

来自分类Dev

如何在React Native中显示图标?

来自分类Dev

如何在React Native中删除警告

来自分类Dev

如何在React Native中传递对象?

来自分类Dev

如何在React Native中刷新屏幕

来自分类Dev

如何在React Native中优化图像

来自分类Dev

如何在 React Native 中缩放图像?

来自分类Dev

如何在React Native中实现滑块菜单

来自分类Dev

如何在React Native中实现'FrameLayout'组件?

来自分类Dev

如何在iOS中实现react-native-dark-mode

来自分类Dev

如何在React Native中实现'FrameLayout'组件?

来自分类Dev

如何在 React Native 中实现以下设计?

来自分类Dev

如何在 FLatList react native 中实现 Sraech bar

来自分类Dev

React native:安装react-native-maps后不存在android文件夹

来自分类Dev

在 react-native 和 redux 以及 react-native-maps 中处理多请求

来自分类Dev

无法在我的专案中执行react-native-maps

来自分类Dev

Tab 中的 react-native-maps 不起作用

Related 相关文章

热门标签

归档