Question

我开始“学习” React Native，我看到的第一个教程使用了<?php echo date('Y'); ?>组件。我尝试了不同的方式来显示地图，但是我不能。

根据视频本身，它从<MapView />导入MapView。但是在博览会网站上阅读了documentation之后，我将导入内容更改为expo。错误发生了变化，但是根本没有地图。

从react-native-maps导入MapView时，出现 Invariant Violation 错误。但是，当从expo导入它时，我在Android和iOS模拟器上出现了空白屏幕。

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

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

react-native-maps

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

Answer 1

进行“一些”研究之后，我可以通过将CSS-in-JS属性添加到容器和地图本身来对其进行修复：

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

aggregation

Answer 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,
  },
});

反应本机空白MapView

2 个答案: