反应原生空白 MapView答案

【问题标题】：React Native Blank MapView反应原生空白 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

标签： javascript android ios reactjs react-native

【解决方案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,
  },
});

【讨论】：