Expo React Native 如何在Expo Web中实现图片拖放功能

分两种场景对应不同实现方案：

内部组件间拖放（仅在你的App内部拖拽图片） #

• 基于Expo官方默认支持的react-native-gesture-handler + react-native-reanimated实现，无需额外原生配置
• 拖拽逻辑：给可拖拽图片绑定PanGesture手势，拖拽开始时记录图片URI、尺寸等元数据，拖拽过程中用Animated实时更新悬浮预览层的坐标，松手时比对落点坐标和接收组件的预存布局坐标（通过组件onLayout回调提前记录接收区域的x/y/宽高），坐标匹配则触发接收逻辑
• 如果需要复用拖拽能力，可自行封装高阶组件包裹拖拽元素和接收元素，统一处理手势和状态传递

跨应用拖放（从系统相册/文件管理器拖入你的App组件） #

• 安卓端：Expo SDK 48+ 支持配置Intent接收过滤器，在app.json中添加ACTION_SEND、ACTION_SEND_MULTIPLE类型的intent规则，监听App激活时的intent事件即可拿到拖入的图片URI，注意适配安卓13+的图片读取权限
• iOS端：封装轻量原生模块绑定UIDropInteraction接口，监听drop事件时获取系统返回的图片Asset信息，适配iOS14+的相册访问权限
• 不需要自己写原生代码的替代方案：可直接适配@dnd-kit/native库，该库已封装好跨平台拖放的原生逻辑，Expo环境下无需改原生配置即可接入

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