如何实现仅在iOS/Android加载react-native-maps，Web端禁用该功能？

方案一：利用React Native平台专属文件（最推荐） #

React Native原生支持根据平台自动加载对应文件，这是最简洁且官方认可的方式：

• 创建MapView.native.js（对应iOS/Android平台）：

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

export { MapView, Marker };

• 创建MapView.web.js（对应Web端）：

// Web端返回占位组件，直接禁用地图功能
const MapView = ({ children, ...props }) => (
  <div style={{ padding: 16, backgroundColor: '#f5f5f5', borderRadius: 8, textAlign: 'center' }}>
    地图功能暂不支持
  </div>
);

// Web端Marker直接返回空组件
const Marker = () => null;

export { MapView, Marker };

• 在业务组件中直接引入使用：

import { MapView, Marker } from './MapView';

const MyComponent = () => (
  <MapView style={{ flex: 1 }}>
    <Marker coordinate={{ latitude: 37.78825, longitude: -122.4324 }} />
  </MapView>
);

iOS/Android会自动加载原生地图组件，Web端则渲染占位内容，全程无需手动写平台判断逻辑。

方案二：修复你的动态导入方案 #

你之前的动态导入失败，核心问题是Web端打包时仍会尝试解析react-native-maps的依赖（哪怕代码没执行），导致报错。可以按下面的方式优化：

import { useState, useEffect } from 'react';
import { Platform } from 'react-native';

const MyMapComponent = () => {
  const [MapView, setMapView] = useState(null);
  const [Marker, setMarker] = useState(null);

  useEffect(() => {
    if (Platform.OS !== 'web') {
      // 仅在非Web端执行地图组件导入
      import('react-native-maps').then(module => {
        setMapView(module.default);
        setMarker(module.Marker);
      });
    }
  }, []);

  // Web端直接显示禁用提示
  if (Platform.OS === 'web') {
    return <div>地图功能暂不支持</div>;
  }

  // 非Web端加载完成前显示占位
  if (!MapView || !Marker) {
    return <div>加载中...</div>;
  }

  return (
    <MapView style={{ flex: 1 }}>
      <Marker coordinate={{ latitude: 37.78825, longitude: -122.4324 }} />
    </MapView>
  );
};

export default MyMapComponent;

同时要给Web端的webpack配置添加别名，避免打包时解析无效依赖：

module.exports = {
  // ...其他webpack配置
  resolve: {
    alias: {
      'react-native-maps': false, // Web端将该模块指向空
    },
  },
};

方案三：静态条件导入 #

借助babel的条件编译能力，在编译阶段就移除Web端的地图导入代码：
在业务代码中直接写：

import { Platform } from 'react-native';

let MapView, Marker;
if (Platform.OS !== 'web') {
  ({ default: MapView, Marker } = require('react-native-maps'));
} else {
  // Web端的占位组件
  MapView = () => <div>地图功能暂不支持</div>;
  Marker = () => null;
}

这种方式需要确保babel配置正确，让Web端编译时自动剔除react-native-maps的导入逻辑，从根源避免打包报错。

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