React Native Swipeable：执行onSwipeableOpen后如何阻止自动关闭

问题描述 #

开发移动端应用时，使用React Native Swipeable实现发票列表的滑动选择功能：用户右滑发票项时，左侧显示勾选框，并将发票编号加入selectedInvoices状态数组，但执行onSwipeableOpen后，Swipeable组件会自动关闭，无法保持展开状态展示选中标识。

当前行为 #

• 在InvoicesList组件中完成发票编号添加到selectedInvoices数组的操作后，Document组件的Swipeable会自动关闭。

预期行为 #

• Swipeable组件保持展开状态，显示左侧勾选菜单，明确指示发票已选中。

问题根源 #

InvoicesList的selectedInvoices状态更新时，会触发组件重新渲染，导致Document组件被重建，Swipeable的展开状态丢失，进而自动关闭。

解决方案 #

1. 给Document组件配置稳定唯一的Key #

当前Document使用数组索引index作为key，状态更新时索引不变，但组件重建会导致Swipeable实例重置。改为使用发票的唯一标识（如invoice.glitem）作为key，确保组件身份稳定：

// InvoicesList.tsx 中map渲染部分修改
invoices.map((invoice: InvoiceType) =>
    <Document
        key={ invoice.glitem } // 替换index为发票唯一标识
        number={ invoice.glitem }
        title={ 'Invoice #' + invoice.documentNumber.toString() }
        status={ invoice.status }
        description={ invoice.customerReference }
        date={ 'Invoiced ' + Moment(invoice.documentDate).format('D MMM YYYY ') }
        value={ invoice.value }
        onSwipeRight={ selectInvoice }
        onSwipeableClose={ unselectInvoice }
        showSwipeDemo={ false }
        isSelected={ selectedInvoices.includes(invoice.glitem) } // 新增选中状态传递
    />
)

2. 监听选中状态，主动控制Swipeable展开/关闭 #

在Document组件中新增isSelected属性，通过useEffect监听选中状态变化，强制保持Swipeable的展开/关闭状态：

// Document.tsx 修改内容
type Props = {
    // ... 原有属性
    isSelected: boolean; // 新增选中状态属性
};

export default function Document({ number, title, status, description, date, value, onPress, onSwipeRight, onSwipeableClose, showSwipeDemo, isSelected }: Props): JSX.Element {
    const theme: Style = getStyle(useColorScheme());
    const swipeableRef = useRef<Swipeable>(null); // 明确Swipeable类型
    const dispatch = useDispatch();

    // 监听选中状态，自动调整Swipeable状态
    useEffect(() => {
        if (swipeableRef.current) {
            isSelected ? swipeableRef.current.openLeft() : swipeableRef.current.close();
        }
    }, [isSelected]);

    // ... 原有代码

    const Container = ({ children }): JSX.Element => {
        return (
            onSwipeRight && onSwipeableClose
                ? <Swipeable
                    ref={ swipeableRef }
                    containerStyle={ theme.swipeableContainer }
                    renderLeftActions={ renderLeftCheckBox }
                    onSwipeableOpen={ onSwipeRightHandler }
                    onSwipeableClose={ () => {
                        // 仅当未选中时触发取消选择，避免状态更新导致的关闭误触发
                        if (!isSelected) onSwipeableCloseHandler();
                    } }
                    overshootLeft={ false }
                    friction={ 2 } // 增加滑动阻力，优化交互体验
                >{ children }</Swipeable>
                : <View style={ theme.container }>{ children }</View>
        );
    };

    // ... 原有代码
}

3. 优化取消选择逻辑 #

调整onSwipeableClose的触发条件，区分用户主动关闭和状态更新导致的关闭，防止重复修改选中数组：

// InvoicesList.tsx 中unselectInvoice函数修改
const unselectInvoice = (invoiceNumber: number, shouldRemove: boolean = true): void => {
    if (shouldRemove) {
        setSelectedInvoices((currentSelectedInvoices) => 
            currentSelectedInvoices.filter(invoice => invoice !== invoiceNumber)
        );
    }
};

// 传递给Document组件时调整参数
onSwipeableClose={ (num) => unselectInvoice(num, !selectedInvoices.includes(num)) }

核心说明 #

• 使用发票唯一标识作为key，避免组件不必要重建，保留Swipeable的状态。
• 通过监听选中状态主动控制Swipeable的展开/关闭，抵消状态更新带来的自动关闭问题。
• 优化回调触发逻辑，避免状态更新导致的误操作，保证选中状态的一致性。

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