React Native中react-native-collapsible删除条目后视图变形求助

问题原因 #

删除条目后，expenses状态更新导致Accordion的sections数据变化，但组件未自动重新计算内容区域的布局高度。手动折叠再展开相当于触发了组件的重新渲染与布局计算，因此视图恢复正常。

解决方案：自动折叠再展开当前活跃区块 #

通过监听expenses的变化，模拟手动折叠再展开的操作，强制Accordion重新计算布局。具体修改如下：

步骤1：导入必要的Hook #

在ExpenseList.js顶部添加：

import { useEffect, useRef } from 'react';

步骤2：添加状态监听与自动折叠逻辑 #

修改ExpenseList组件内部代码：

function ExpenseList(props) {
    const [activeSections, setActiveSections] = useState([]);
    const [isCollapsed, setIsCollapsed] = useState(true);
    // 用ref保存当前活跃区块，避免闭包问题
    const currentActiveSections = useRef(activeSections);

    // 实时更新ref中的活跃区块状态
    useEffect(() => {
        currentActiveSections.current = activeSections;
    }, [activeSections]);

    // 监听expenses变化，触发折叠再展开
    useEffect(() => {
        const sections = currentActiveSections.current;
        if (sections.length > 0) {
            // 先折叠当前区块
            setActiveSections([]);
            // 延迟时间与Accordion的duration属性保持一致
            setTimeout(() => {
                setActiveSections(sections);
            }, 400);
        }
    }, [props.expenses]);

    // 原有代码不变...
}

可选优化：确保内容容器自适应高度 #

检查styles.content是否设置了flex:1，让内容容器能根据条目数量自动调整高度：

const styles = StyleSheet.create({
    content: {
        flex: 1, // 添加这一行
        // 其他原有样式...
    },
    // 其他样式...
});

备选方案：强制重新挂载Accordion #

如果上述方案仍有问题，可以通过修改Accordion的key属性，让组件在expenses变化时重新挂载：

<Accordion
    key={JSON.stringify(props.expenses)} // 添加动态key
    align='bottom'
    activeSections={activeSections}
    sections={finalExpensesArray}
    touchableComponent={TouchableOpacity}
    expandMultiple={false}
    renderHeader={renderHeader}
    renderContent={renderContent}
    duration={400}
    onChange={setSections}
    renderAsFlatList={false} />

注意：此方案会导致Accordion重新初始化，原有活跃区块会关闭，用户需要手动重新打开。

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