基于Expo与Metro的React Native Web地图实现求助

方案1：条件渲染+原生Web地图组件 #

利用平台区分逻辑，移动端使用成熟的react-native-maps，网页端直接调用Web原生地图SDK（如Mapbox GL JS、Google Maps JavaScript API），完全避开Metro与Webpack的适配冲突问题。

实现步骤 #

1. 安装移动端依赖：

expo install react-native-maps

2. 编写跨平台地图组件，通过Platform.OS区分渲染逻辑：

import { Platform, View, StyleSheet } from 'react-native';
import MapView from 'react-native-maps';
import { useEffect, useRef } from 'react';

const MapComponent = () => {
  const webMapContainer = useRef(null);

  // 移动端渲染react-native-maps
  if (Platform.OS !== 'web') {
    return (
      <MapView
        style={styles.map}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
    );
  }

  // 网页端渲染Mapbox GL JS
  useEffect(() => {
    // 动态加载Mapbox脚本与样式，避免移动端打包冗余代码
    if (!window.mapboxgl) {
      const script = document.createElement('script');
      script.src = 'https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js';
      script.onload = initWebMap;
      document.head.appendChild(script);

      const styleLink = document.createElement('link');
      styleLink.rel = 'stylesheet';
      styleLink.href = 'https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css';
      document.head.appendChild(styleLink);
    } else {
      initWebMap();
    }

    function initWebMap() {
      if (!webMapContainer.current) return;
      window.mapboxgl.accessToken = '你的Mapbox API密钥';
      new window.mapboxgl.Map({
        container: webMapContainer.current,
        style: 'mapbox://styles/mapbox/streets-v12',
        center: [-122.4324, 37.78825],
        zoom: 12,
      });
    }

    // 组件卸载时清理地图实例
    return () => {
      if (window.mapboxgl && webMapContainer.current?._map) {
        webMapContainer.current._map.remove();
      }
    };
  }, []);

  return <div ref={webMapContainer} style={styles.map} />;
};

const styles = StyleSheet.create({
  map: {
    flex: 1,
    width: '100%',
    height: '100%',
  },
});

export default MapComponent;

方案2：适配Metro的@teovilla/react-native-web-maps #

如果偏好统一的React组件写法，可调整Metro配置，让@teovilla/react-native-web-maps在Expo Router的Metro环境下工作：

实现步骤 #

1. 安装依赖：

expo install react-native-maps
npm install @teovilla/react-native-web-maps

2. 修改项目根目录的metro.config.js，添加Web适配配置：

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

const config = getDefaultConfig(__dirname);

// 支持web.js后缀文件
config.resolver.sourceExts.push('web.js');
// 使用react-native-web的转换器
config.transformer.babelTransformerPath = require.resolve('react-native-web/dist/transformer');

module.exports = config;

3. 直接使用统一的MapView组件，库会自动区分平台渲染：

import MapView from 'react-native-maps';
import { StyleSheet } from 'react-native';

export default function MapComponent() {
  return (
    <MapView
      style={styles.map}
      initialRegion={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    />
  );
}

const styles = StyleSheet.create({
  map: {
    flex: 1,
  },
});

注意事项 #

• 网页端仍需申请对应地图服务的API密钥（如Google Maps或Mapbox），并通过环境变量传入
• 测试时确保Expo Web构建正常，若遇到依赖报错，可调整react-native-web与@teovilla/react-native-web-maps的版本兼容性

方案3：Google Maps跨平台方案 #

移动端使用@react-native-google-maps/google-maps（通过Expo Config Plugin配置），网页端使用Google Maps JavaScript API，同样通过条件渲染实现：

核心代码示例 #

import { Platform, View, StyleSheet } from 'react-native';
import MapView from '@react-native-google-maps/google-maps';
import { useEffect, useRef } from 'react';

const MapComponent = () => {
  const webMapContainer = useRef(null);

  if (Platform.OS !== 'web') {
    return (
      <MapView
        style={styles.map}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
    );
  }

  useEffect(() => {
    if (!window.google) {
      const script = document.createElement('script');
      script.src = `https://maps.googleapis.com/maps/api/js?key=你的Google Maps API密钥`;
      script.onload = initGoogleMap;
      document.head.appendChild(script);
    } else {
      initGoogleMap();
    }

    function initGoogleMap() {
      if (!webMapContainer.current) return;
      new window.google.maps.Map(webMapContainer.current, {
        center: { lat: 37.78825, lng: -122.4324 },
        zoom: 12,
      });
    }
  }, []);

  return <div ref={webMapContainer} style={styles.map} />;
};

const styles = StyleSheet.create({
  map: {
    flex: 1,
    width: '100%',
    height: '100%',
  },
});

export default MapComponent;

内容的提问来源于stack exchange，提问作者michjea