React Native拖拽列表问题：图标仅移至数组0位且UI无更新

问题描述 #

我在React Native中实现拖拽列表功能，需求是长按图标后可拖动到列表内目标位置，拖动过程要有视觉移动反馈。但目前遇到以下问题：

• 图标拖动后仅会移动到数组的第0位
• UI界面无法反映图标的移动变化
• 终端收到Reanimated警告：WARN [Reanimated] Tried to modify key current of an object which has been already passed to a worklet.

实现代码 #

ListOfLinks 组件 #

const ListOfLinks = ({navigation}) => {
  const [mediaData, setMediaData] = useState(MEDIA_DATA);

  const handlePress = useCallback(
    (item: {id: string; title: string; image: string}) => {
      navigation.navigate('MediaLinkModal', {
        selectedItemTitle: item.title,
        selectedItemImage: item.image,
      });
    },
    [navigation],
  );

  const renderItem = useCallback(
    ({item, drag, isActive}: RenderItemParams<Item>) => (
      <ScaleDecorator>
        <TouchableOpacity
          onLongPress={drag}
          disabled={isActive}
          style={[
            styles.rowItem,
            {
              backgroundColor: isActive ? 'lightgray' : 'transparent',
            },
          ]}
          onPress={() => handlePress(item)}>
          <Image source={{uri: item.image}} style={styles.image} />
          <Text style={styles.text}>{item.title}</Text>
        </TouchableOpacity>
      </ScaleDecorator>
    ),
    [handlePress],
  );

  return (
    <GestureHandlerRootView style={{flex: 1}}>
      <DraggableFlatList
        data={mediaData}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        onDragEnd={({data}) => {
          setMediaData(data);
        }}
        numColumns={3}
        columnWrapperStyle={styles.columnWrapper}
        activationDistance={15}
      />
    </GestureHandlerRootView>
  );
};

App 组件 #

function App() {
  return (
    <GestureHandlerRootView style={{flex: 1}}>
      <AppNavigator />
    </GestureHandlerRootView>
  );
}

export default App;

问题原因与修复方案 #

1. 拖拽位置异常与UI不更新 #

DraggableFlatList 在多列（numColumns={3}）场景下，默认排序逻辑易出现异常；同时状态更新未遵循不可变原则，导致UI无法触发重渲染。

修复：

• 确保状态更新使用不可变方式，浅拷贝数组避免直接修改引用：

onDragEnd={({ data }) => {
  setMediaData([...data]);
}}

2. Reanimated 警告修复 #

警告源于在worklet中修改了已转为shareable的对象，多由依赖传递或内部状态处理不当导致。

修复：

• 传递给handlePress的item使用副本，避免意外修改原始数据：

onPress={() => handlePress({...item})}

• 升级react-native-reanimated和react-native-draggable-flatlist到最新稳定版本，此类已知问题大多已修复。

3. 多列拖拽布局优化 #

多列列表需明确单元格尺寸，帮助组件正确计算拖拽位置：

<DraggableFlatList
  // ...其他属性
  cellSize={120} // 根据实际单元格尺寸调整
/>

4. 嵌套手势容器冲突 #

App和ListOfLinks组件重复嵌套GestureHandlerRootView会导致手势冲突，仅保留最外层容器即可：

修改ListOfLinks的返回部分：

return (
  <DraggableFlatList
    data={mediaData}
    renderItem={renderItem}
    keyExtractor={item => item.id}
    onDragEnd={({ data }) => setMediaData([...data])}
    numColumns={3}
    columnWrapperStyle={styles.columnWrapper}
    activationDistance={15}
    cellSize={120}
  />
);

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