带有 Expo 和 Metro 的 React Native Web 地图

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.jsandmymap.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';