React Native Web 与 Expo 和 Metro 的地图

Question

我正在使用 React Native Expo 构建一个混合应用程序。我的困难是我的应用程序需要地图并且需要在移动和网络上运行。为了使用 React Native 制作地图，我找到了几个库，但总是有一个问题：

• react-native-maps：不支持网络。 （https://github.com/react-native-maps/react-native-maps）
• @teovilla/react-native-web-maps ：使用 Webpack 配置，但我使用 Metro（以便能够使用 Expo Router）
• react-native-leaflet ：使用 Webview，因此不兼容 web
• MapBox SDK：不能与Expo Go一起使用（https://github.com/rnmapbox/maps/blob/main/plugin/install.md）

我尝试了所有这些库，但无法在网络中实现地图的渲染。

我的目标只是使用 Metro 在网络中使用带有 React Native Expo 的地图。也许我错过了一些东西，但我真的不知道如何显示地图。欢迎任何帮助。预先感谢。

Answer 1

我发现我们也可以简单地将

@teovilla/react-native-web-maps

与 Metro 一起使用。为此，我们可以创建一个

mymap.web.js

和

mymap.js

组件。 React Native 将足够聪明，为正在构建的平台选择正确的扩展。在第一个组件中，我们可以导入

@teovilla/react-native-web-maps

，在第二个组件中，我们可以导入

react-native-maps

。

// /components/mymap.web.js
import MapView from "@teovilla/react-native-web-maps";
export default MapView;

// /components/mymap.js
import MapView from 'react-native-maps';
export default MapView;

现在在我们的代码中，我们可以像这样导入我们的组件（适应路径）：

import MapView from '../components/mymap';

Answer 2

嘿，我们知道如何使用 @teovilla/react-native-web-maps 为 MapView.web.tsx 组件设置 api 密钥吗？