Javascript 反应本机空白地图视图

我开始“学习”React Native，我看到的第一个教程使用了

组件。我尝试了不同的方法来显示地图，但我不能

根据视频本身，它从

expo

导入

MapView

。但在世博会现场阅读了一些内容后，我将导入内容更改为

react native maps

。错误会更改，但根本没有映射

从

expo

导入

MapView

时，我得到一个不变的冲突错误。但是当从

react native maps

导入时，我在Android和iOS模拟器上看到一个空白屏幕

我发现这个在线实时编辑器有自己的iOS/Android/Web模拟器。例如：

这是代码。它有两行

从“React”导入React；
从“react native”导入{Text，View}；
从“react native maps”导入MapView；
函数App（）{
常量[region，setRegion]=React.useState({
纬度：-30.8501718，
经度：-50.1700368，
纬度德尔塔：0.922，
纵向德尔塔：0.0421
})
返回(
地图屏幕
);
}
导出默认应用程序；

怎么了？任何评论都将不胜感激。

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

根据GitHub上的回复，它对我有效

从“React”导入React；
从“react native”导入{样式表、文本、视图}；
从“react native maps”导入MapView；
函数App（）{
常量[region，setRegion]=React.useState({
纬度：-30.8501718，
经度：-50.1700368，
纬度德尔塔：0.922，
纵向德尔塔：0.0421
})
返回(
潘塔拉·德伊尼西奥酒店
);
}
导出默认应用程序；
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
排名：0，
左:0,，
右:0,，
底部：0，
位置：'绝对'
},
地图：{
排名：0，
左:0,，
右:0,，
底部：0，
位置：'绝对'
}
});

我也遇到了同样的问题，地图视图显示为空白

我添加了一个样式：

style={style.mapStyle}

到地图视图，它的工作

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

从“世博会状态栏”导入{StatusBar}；
从“React”导入React；
从“react native maps”导入MapView，{PROVIDER_GOOGLE}；
从“react native”导入{样式表、文本、视图、维度}；
导出默认函数App（）{
返回(
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
地图样式：{
宽度：尺寸。获取（'窗口'）。宽度，
高度：尺寸。获取（“窗口”）。高度，
},
});

请在app.json中设置apiKey。并在