基于Native-Base，如何在FlatList中关闭SwipeRow？

嘿，我完全懂你的困扰——ListView里关闭SwipeRow那套顺手的操作，到FlatList里好像找不到现成的API支持，毕竟官方FlatList源码里确实没内置这个功能。不过别担心，咱们可以通过手动管理组件引用或者状态控制来实现，下面给你两种常用的方案：

方案一：利用SwipeRow组件的内置close方法（以react-native-swipe-list-view为例） #

如果你用的是第三方库（比如react-native-swipe-list-view）的SwipeRow，这类组件一般会暴露close()方法。我们只需要跟踪当前打开的行引用，在需要关闭时调用这个方法即可：

1. 首先在组件里维护一个状态，用来记录当前打开的SwipeRow引用；
2. 在FlatList的renderItem中，给每个SwipeRow设置ref，并监听onOpen事件来更新引用、关闭之前打开的行。

具体代码示例：

import React, { useState } from 'react';
import { View, Text, FlatList } from 'react-native';
import { SwipeRow } from 'react-native-swipe-list-view';

const YourComponent = () => {
  const [openRowRef, setOpenRowRef] = useState(null);
  const yourData = [/* 你的数据源，每个item最好带唯一id */];

  // 处理行打开事件：关闭之前的行，记录当前行的引用
  const handleRowOpen = (currentRef) => {
    if (openRowRef && openRowRef !== currentRef) {
      openRowRef.close();
    }
    setOpenRowRef(currentRef);
  };

  const renderItem = ({ item }) => (
    <SwipeRow
      ref={(ref) => (item.swipeRef = ref)}
      onOpen={() => handleRowOpen(item.swipeRef)}
      // 配置滑动阈值、动画等属性
    >
      {/* 右侧滑动操作区 */}
      <View style={{ backgroundColor: 'red', justifyContent: 'center', paddingHorizontal: 20 }}>
        <Text style={{ color: 'white' }}>删除</Text>
      </View>
      {/* 行的主内容区 */}
      <View style={{ padding: 16, backgroundColor: 'white' }}>
        <Text>{item.title}</Text>
      </View>
    </SwipeRow>
  );

  return (
    <FlatList
      data={yourData}
      renderItem={renderItem}
      keyExtractor={(item) => item.id.toString()}
    />
  );
};

export default YourComponent;

如果需要主动关闭所有行（比如点击页面空白处），可以写一个通用的关闭函数：

const closeAllSwipeRows = () => {
  if (openRowRef) {
    openRowRef.close();
    setOpenRowRef(null);
  }
};

方案二：自定义SwipeRow，通过状态控制打开/关闭 #

如果是你自己实现的SwipeRow组件，那可以通过父组件传递状态来控制它的打开状态：

1. 自定义SwipeRow组件，接收isOpen和onToggle props：

const CustomSwipeRow = ({ isOpen, onToggle, frontContent, backContent }) => {
  // 这里实现滑动逻辑，根据isOpen控制位移/显示状态
  return (
    <View style={{ position: 'relative' }}>
      {backContent}
      <View
        style={{
          transform: [{ translateX: isOpen ? -100 : 0 }],
          transition: 'transform 0.3s',
          backgroundColor: 'white',
          width: '100%'
        }}
        onTouchEnd={() => onToggle(!isOpen)}
      >
        {frontContent}
      </View>
    </View>
  );
};

2. 在FlatList所在组件中，维护openRowId状态，记录当前打开行的id：

const YourComponent = () => {
  const [openRowId, setOpenRowId] = useState(null);
  const yourData = [/* 数据源 */];

  const handleRowToggle = (itemId) => {
    // 如果点击的是当前打开的行，就关闭；否则关闭之前的，打开当前的
    setOpenRowId(prevId => prevId === itemId ? null : itemId);
  };

  const renderItem = ({ item }) => (
    <CustomSwipeRow
      isOpen={openRowId === item.id}
      onToggle={() => handleRowToggle(item.id)}
      frontContent={<Text>{item.title}</Text>}
      backContent={<Text>删除</Text>}
    />
  );

  return <FlatList data={yourData} renderItem={renderItem} keyExtractor={item => item.id} />;
};

这两种方案都能完美解决FlatList中关闭SwipeRow的问题，本质都是手动管理行的打开状态——毕竟FlatList本身确实没内置这个功能，得咱们自己补全～

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