解决Snack Expo中React Native无法解析react-dom.js模块的报错

问题根源 #

你使用的@dnd-kit/core和@dnd-kit/sortable是为Web端（基于react-dom）设计的库，内部依赖Web环境专属的API与react-dom模块。但Expo Snack的React Native环境默认不包含react-dom，也不支持Web端DOM相关API，因此在移动端模拟器触发模块解析错误；而网页端能正常运行，是因为网页环境本身自带react-dom。

有效解决方案 #

方案1：改用@dnd-kit的React Native适配版本

@dnd-kit官方提供了React Native专用包@dnd-kit/react-native，专门适配React Native的触摸系统与运行环境：

1. 更新package.json依赖
   移除不必要的react-dom，将Web版dnd-kit包替换为React Native版本：

"dependencies": {
  "@dnd-kit/react-native": "^6.1.0",
  "@dnd-kit/sortable": "^8.0.0",
  "@expo/vector-icons": "^14.0.2",
  "react-native-paper": "4.9.2",
  "react": "18.2.0",
  "react-native": "0.72.6"
}

注意：不要用*作为版本号，指定明确的兼容版本可避免依赖冲突；React版本建议使用Expo Snack默认的18.x（19.x目前仍不稳定）。

2. 调整App.js中的导入
   将Web版导入替换为React Native版本的组件与钩子：

import React, { useState } from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity, ScrollView } from 'react-native';
import {
  DndContext,
  closestCenter,
  TouchSensor,
  useSensor,
  useSensors,
} from '@dnd-kit/react-native';
import {
  SortableContext,
  arrayMove,
  rectSortingStrategy,
  useSortable,
} from '@dnd-kit/sortable';

（React Native版本无需PointerSensor，移动端仅需TouchSensor即可）

方案2：替换为React Native原生拖拽库

如果@dnd-kit/react-native在Snack中仍存在兼容性问题，可改用Expo生态更成熟的react-native-draggable-flatlist，它是专门为React Native列表拖拽场景设计的：

1. 添加依赖

"dependencies": {
  "react-native-draggable-flatlist": "^4.0.1",
  "@expo/vector-icons": "^14.0.2",
  "react-native-paper": "4.9.2",
  "react": "18.2.0",
  "react-native": "0.72.6"
}

2. 示例代码结构

import DraggableFlatList from "react-native-draggable-flatlist";

// 组件内使用示例
<DraggableFlatList
  data={yourDataArray}
  onDragEnd={({ data }) => setYourData(data)}
  keyExtractor={(item) => item.id}
  renderItem={({ item, drag, isActive }) => (
    <TouchableOpacity onLongPress={drag} disabled={isActive}>
      <View style={styles.item}>
        <Text>{item.text}</Text>
      </View>
    </TouchableOpacity>
  )}
/>

额外注意事项 #

• 不要在React Native项目中手动添加react-dom依赖，这会引发模块解析冲突——React Native本身依赖的是react-native模块而非react-dom。
• Expo Snack的依赖版本受限于其内置环境，尽量使用官方推荐的稳定版本，避免使用过新的React版本（如19.x）。

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