React Native实现可拖动回弹图片：替换蓝色方块为图片的问题求助

你的代码里有两个关键问题导致图片无法正常显示：

1. 变量名不统一 #

你用useRef创建的动画变量叫position，但后续逻辑里全写成了pan，这会直接导致报错，代码根本跑不起来。需要把所有pan改成position，或者统一变量名为pan。

2. 错误将Image组件塞到style属性中 #

style属性只能接收样式对象或数组，不能放React组件。你需要把Image作为可拖动容器的子元素，或者直接使用Animated.Image（推荐，减少嵌套层级）。

修正后的完整代码：

import React, { useRef } from "react";
import { Animated, PanResponder, StyleSheet, View, Image } from "react-native";

const Users = [{id:"1", uri: require('./assets/present.jpeg'), keyword: 'present1'}]

const DraggableView = () => {
  // 统一变量名为pan，避免混乱
  const pan = useRef(new Animated.ValueXY()).current;

  const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderMove: Animated.event(
      [null, { dx: pan.x, dy: pan.y }],
      { useNativeDriver: false } // getLayout不支持native驱动，必须关闭
    ),
    onPanResponderRelease: () => {
      Animated.spring(pan, {
        toValue: { x: 0, y: 0 },
        useNativeDriver: false
      }).start();
    },
  });

  return (
    <View style={styles.container}>
      {/* 直接用Animated.Image作为可拖动元素，简洁高效 */}
      <Animated.Image
        {...panResponder.panHandlers}
        source={require('./assets/present.jpeg')}
        style={[pan.getLayout(), styles.image]}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  image: {
    width: 80,
    height: 80,
    borderRadius: 4, // 和原蓝色方块圆角保持一致，可选
  },
});

export default DraggableView;

补充说明：

• 必须添加useNativeDriver: false，因为getLayout方法不支持native驱动，不写会出现警告。
• 给Image设置宽高，避免默认显示异常，尺寸可根据需求调整。

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