无法在博览会中使用react-native-web-maps

Question

我正在尝试向我的项目添加地图，因此我在本机中使用

react-native-maps

，在网络中使用

@teovilla/react-native-web-maps

。

这是package.json中的依赖项

 "dependencies": {
    .....
    "@react-navigation/native": "^6.0.2",
    "@teovilla/react-native-web-maps": "^0.9.3",
    "expo": "~49.0.11",
    "expo-router": "^2.0.9",
    "react-native": "0.72.6",
    "react-native-maps": "1.7.1",
    "react-native-web": "~0.19.6",
    .....
  },

我尝试了多种方法来设置

@teovilla/react-native-web-maps

的配置，但仍然不起作用。

1.

@teovilla/react-native-web-maps

使用 Webpack 配置，但我使用 Metro（带有 expo router v2）。所以我尝试了Map for React Native Web With Expo and Metro

中的方法

// /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;

// in my component
import MapView from '../components/mymap';

编译成功，但地图没有在网页中显示。

2.将 webpack.config.js 设置为文档

// webpack.config.js

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  config.resolve.alias['react-native-maps'] = '@teovilla/react-native-web-maps';

  return config;
};

编译失败

3.在metro.config.js中添加配置（？）

const { getDefaultConfig } = require("expo/metro-config");

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname, {
  // [Web-only]: Enables CSS support in Metro.
  isCSSEnabled: true,
});
config.resolver.sourceExts.push("mjs");

config.resolver.extraNodeModules = {
  ...config.resolver.extraNodeModules,
  "react-native-maps": require.resolve(
    process.env.EXPO_WEBPACK_PLATFORM === "web"
      ? "@teovilla/react-native-web-maps"
      : "react-native-maps",
  ),
};

module.exports = config;

仍然编译失败

Answer 1

您的第一种方法似乎是正确的并且对我有用。唯一的区别是我使用了 @rnmapbox/maps 模块中的 Mapbox 进行 Web 处理。 Platform Specific modules下的

世博文档

对此进行了解释。

这是本机文件

map.native.tsx

的样子：

import MapView, { Marker, PROVIDER_DEFAULT, Region } from 'react-native-maps';

export { MapView, Marker, PROVIDER_DEFAULT };
export type { Region };

对于网络，我最终在需要的地方单独导入它并有条件地渲染它。

import MapboxGL, { MapState } from '@rnmapbox/maps';

然后：

{Platform.OS === 'web' ? (...'use MapboxGL here' ) : ('use mapview here')