使用react-native-collapsible实现打开单个标签时自动关闭其他标签

完全可以仅使用react-native-collapsible实现该需求，无需引入Accordion组件。你当前代码的问题是三个折叠面板的状态独立控制，切换时不会互相影响，只需在切换单个面板状态时强制折叠其余两个面板即可。

方案一：基于现有代码最小改动 #

直接修改三个切换函数，每次切换当前面板时，将另外两个面板的折叠状态设为true（即关闭）：

const ToggleBookingList = () => {
    setBookingList(!bookingList);
    // 折叠其余两个面板
    setCompleted(true);
    setOnGoing(true);
};

const ToggleCompletedList = () => {
    setCompleted(!completed);
    // 折叠其余两个面板
    setBookingList(true);
    setOnGoing(true);
};

const ToggleOngoingList = () => {
    setOnGoing(!ongoing);
    // 折叠其余两个面板
    setBookingList(true);
    setCompleted(true);
};

如果需要同步按钮选中样式，可以将按钮的背景色和对应面板状态绑定，例如Upcoming按钮的样式：

backgroundColor: bookingList ? 'white' : 'yellow'

方案二：简化状态管理（更推荐） #

将三个独立状态合并为单个激活标签状态，代码更简洁易维护：

1. 替换原有三个状态定义：

// 可选值：'upcoming' | 'completed' | 'ongoing' | null，null表示全部面板折叠
const [activeTab, setActiveTab] = useState(null);

2. 统一使用一个切换函数：

const toggleTab = (tabName) => {
    // 点击已激活的标签则全部折叠，否则切换到对应标签
    setActiveTab(activeTab === tabName ? null : tabName);
}

3. 修改按钮的点击事件和样式：
   以Upcoming按钮为例，其余两个按钮同理修改：

<TouchableOpacity 
    onPress={() => toggleTab('upcoming')} 
    style={{
        paddingTop:15, 
        paddingBottom:15, 
        paddingLeft:20, 
        paddingRight:20, 
        borderRadius:25,
        // 激活状态显示黄色，否则显示白色
        backgroundColor: activeTab === 'upcoming' ? 'yellow' : 'white'
    }}
>
    <Text style={{fontSize:15, fontWeight:'bold'}}>Upcoming</Text>
</TouchableOpacity>

4. 修改Collapsible的collapsed属性：

{/* Upcoming面板 */}
<Collapsible collapsed={activeTab !== 'upcoming'} align="center">
    <FlatList
        contentContainerStyle={{paddingHorizontal: 10, paddingBottom: 20}}
        data={userBookingData}
        keyExtractor={(item) => item.id} 
        renderItem={({item}) => <NewOrderPopUp navigation={navigation} driversLocation={route.params} {...item}/>}
    /> 
</Collapsible>

{/* Completed面板 */}
<Collapsible collapsed={activeTab !== 'completed'} align="center">
    <Text>Completed Lists</Text>
</Collapsible>

{/* Ongoing面板 */}
<Collapsible collapsed={activeTab !== 'ongoing'} align="center">
    <Text>OnGoing Lists</Text>
</Collapsible>

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