反应原生空白 MapView

Posted 2023-03-12

【中文标题】反应原生空白 MapView

【英文标题】：React Native Blank MapView

【发布时间】：2019-09-25 15:45:20

【问题描述】：

我开始“学习” React Native，我看到的第一个教程使用了<MapView /> 组件。我尝试了不同的方式来显示地图，但我无法做到。

根据视频本身，它从expo 导入MapView。但在世博会现场阅读了一些documentation 之后，我将导入更改为react-native-maps。错误发生了变化，但根本没有地图。

当从 expo 导入 MapView 时，我收到 Invariant Violation 错误。但是当从react-native-maps 导入它时，我在 android 和 ios 模拟器上得到一个空白屏幕。

我发现这个在线实时编辑器带有自己的 iOS/Android/Web 模拟器。这是示例：https://snack.expo.io/B1H3VWtDH

这是代码。它有两行...

import React from 'react';
import  Text, View  from 'react-native';
import MapView from 'react-native-maps';

function App() 
  const [region, setRegion] = React.useState(
    latitude: -30.8501718,
    longitude: -50.1700368,
    latitudeDelta: 0.922,
    longitudeDelta: 0.0421
  )

  return (
    <View>
      <Text>Map screen</Text>
      <MapView
        initialRegion=region
        style= flex: 1 
      />
    </View>
  );


export default App;

怎么了？任何 cmets 将不胜感激。

【问题讨论】：

请在app.json中设置apiKey。并在 console.developers.google.com/apis/library

启用 Maps SDK for Android 和 Maps SDK for iOS

【参考方案1】：

在做了“一些”研究之后，我能够通过向容器和地图本身添加 CSS-in-JS 属性来修复它：

根据this issue's 在 GitHub 上的回复，它对我有用。

import React from 'react';
import  StyleSheet, Text, View  from 'react-native';
import MapView from 'react-native-maps';

function App() 
  const [region, setRegion] = React.useState(
    latitude: -30.8501718,
    longitude: -50.1700368,
    latitudeDelta: 0.922,
    longitudeDelta: 0.0421
  )

  return (
    <View style=styles.container>
      <Text>Pantalla de inicio</Text>      
      <MapView
        initialRegion=region
        showsUserLocation=true
        showsCompass=true
        rotateEnabled=true
        style=styles.map 
      />
    </View>
  );


export default App;

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

【参考方案2】：

我遇到了同样的问题，MapView 显示为空白。

我添加了一个样式：

style=styles.mapStyle

到 MapView 并且它可以工作！

import  StatusBar  from 'expo-status-bar';
import React from 'react';
import MapView,  PROVIDER_GOOGLE  from 'react-native-maps';
import  StyleSheet, Text, View, Dimensions  from 'react-native';

export default function App() 
  return (
    <View style=styles.container>
      <MapView
         style= flex: 1 
         provider= PROVIDER_GOOGLE 
         showsUserLocation
          initialRegion=
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421
          style=styles.mapStyle
      />
      <StatusBar translucent="false" barStyle="light-content"/>
    </View>
  );


const styles = StyleSheet.create(
  container: 
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  ,
  mapStyle: 
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  ,
);