React Native中如何动态创建多个Ref，实现所有动态生成的Swipeable组件自动关闭

我懂你现在的困扰——单个useRef确实只能保存最后一个渲染的Swipeable实例引用，每次循环渲染时新的组件都会覆盖掉之前的引用，所以只有最后一个能响应close()调用。下面是具体的解决方案，让你能控制所有动态创建的Swipeable组件：

核心思路：用集合存储所有Swipeable的Ref #

不要用单个变量存Ref，而是用对象或数组来存储每个Swipeable的实例，这样每个组件的引用都能被单独保存，不会被覆盖。

步骤1：初始化存储Ref的容器 #

把原来的单个Swipeablee ref改成一个对象（用消息id作为键更直观）：

const [messages, setMessages] = useState([]);
const swipeableRefs = useRef({}); // 用对象存储，key为消息id，value为对应Swipeable实例

步骤2：给每个Swipeable绑定Ref #

在map渲染时，用函数式Ref把每个Swipeable的实例存到对象里：

return (
  <View>
    {messages.map(({ id, data }) => (
      <Swipeable 
        key={id} 
        renderLeftActions={leftActions} 
        onSwipeableLeftOpen={() => swipeAction(data, id)} 
        overshootLeft={false} 
        ref={(ref) => { swipeableRefs.current[id] = ref; }} // 将当前实例按id存入对象
        overshootFriction={8} 
      >
        {/* 你的消息内容组件 */}
      </Swipeable>
    ))}
  </View>
);

步骤3：修改swipeAction函数控制所有组件 #

现在你可以遍历所有存储的Ref，调用它们的close()方法。比如要关闭所有Swipeable：

const swipeAction = (data, currentId) => { 
  // 遍历所有Swipeable实例，调用close方法
  Object.values(swipeableRefs.current).forEach(ref => {
    if (ref && typeof ref.close === 'function') {
      ref.close();
    }
  });

  // 如果需求是「打开当前组件时，关闭其他所有组件」，可以加判断：
  // Object.entries(swipeableRefs.current).forEach(([id, ref]) => {
  //   if (id !== currentId && ref && typeof ref.close === 'function') {
  //     ref.close();
  //   }
  // });
}

可选：清理无用的Ref（避免内存泄漏） #

当messages数组更新（比如删除消息）时，记得清理掉对应消息的Ref，避免内存占用：

useEffect(() => {
  const existingIds = new Set(messages.map(msg => msg.id));
  // 过滤掉已经不存在的消息的Ref
  swipeableRefs.current = Object.fromEntries(
    Object.entries(swipeableRefs.current).filter(([id]) => existingIds.has(id))
  );
}, [messages]);

这样修改后，你就能轻松控制所有动态创建的Swipeable组件，调用它们的close()方法啦！

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