如果一个选项卡打开，则关闭其他选项卡（react-native-collapsible）

Question

大家好，我只是想问一下，如果打开了一个选项卡，是否可以关闭其他选项卡。这是我的代码

    const [bookingList, setBookingList] = useState(true);
    const [completed, setCompleted] = useState(true);
    const [ongoing, setOnGoing] = useState(true);

 const ToggleBookingList = () => {
        setBookingList(!bookingList);
    };

    const ToggleCompletedList = () => {
        setCompleted(!completed);
    };

    const ToggleOngoingList = () => {
        setOnGoing(!ongoing);
    };

 return (
        <View style={{flex:1}}>
            <View style={{flex:0.5}}>
            <Image 
                source={require('../../Assets/Icons/overlay-01.png')}
                style={{resizeMode: 'repeat'}}
            />
            </View>
            <View style={{flex:1}}>
                <View style={{flex:1, backgroundColor:'white'}}>
                    <Text style={{fontSize:20, fontWeight:'bold', marginLeft: 25, marginTop: 15}}>Trip List, Monday 4:20 PM</Text>
                </View>
                <View style={{flex:1, flexDirection:'row',backgroundColor:'white'}}>
                    <View style={{flex:1, backgroundColor:'white', alignItems:'center', justifyContent:'center'}}>
                        <TouchableOpacity onPress={ToggleBookingList} style={{paddingTop:15, paddingBottom:15, paddingLeft:20, paddingRight:20, borderRadius:25,backgroundColor:'yellow'}}>
                            <Text style={{fontSize:15, fontWeight:'bold'}}>Upcoming</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={{flex:1, backgroundColor:'white', alignItems:'center', justifyContent:'center'}}>
                        <TouchableOpacity onPress={ToggleCompletedList} style={{paddingTop:15, paddingBottom:15, paddingLeft:20, paddingRight:20, borderRadius:25,backgroundColor:'white'}}>
                            <Text style={{fontSize:15, fontWeight:'bold'}}>Completed</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={{flex:1, backgroundColor:'white', alignItems:'center', justifyContent:'center'}}>
                        <TouchableOpacity onPress={ToggleOngoingList} style={{paddingTop:15, paddingBottom:15, paddingLeft:20, paddingRight:20, borderRadius:25,backgroundColor:'white'}}>
                            <Text style={{fontSize:15, fontWeight:'bold'}}>Ongoing</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
            <View style={{flex:4, backgroundColor:'white'}}>
                <Collapsible collapsed={bookingList} align="center">
                    <FlatList
                        contentContainerStyle={{paddingHorizontal: 10, paddingBottom: 20}}
                        data={userBookingData}
                        keyExtractor={(item) => item.id} 
                        renderItem={({item}) => <NewOrderPopUp navigation={navigation} driversLocation={route.params} {...item}/>}
                    /> 
                </Collapsible>
                <Collapsible collapsed={completed} align="center">
                    <Text>Completed Lists</Text>
                </Collapsible>
                <Collapsible collapsed={ongoing} align="center">
                    <Text>OnGoing Lists</Text>
                </Collapsible>
            </View>
        </View>
    );

此代码的唯一问题是，如果我打开“即将到来”按钮并同时打开“已完成”按钮，这两个按钮都会弹出，我想防止这种情况发生。没有手风琴可以吗？

我正在使用react-native-collapsible

PS : 我不想用手风琴，对我来说足够了

Answer 1

最好在同一个对象中包含与 collapsible 组件相关的所有状态。因此，您可以一次设置所有这三个项目，只有一个项目展开，其他 2 个项目处于折叠模式。

const [isCollapsedArray, setIsCollapsedArray] = useState({
    bookingList:true,
    completed:true,
    ongoing:true
});

const ToggleBookingList = () => {
    setIsCollapsedArray(collapsed => ({
        bookingList:!collapsed.bookingList,
        completed:true,
        ongoing:true
    }));
};

const ToggleCompletedList = () => {
    setIsCollapsedArray(collapsed => ({
        bookingList:true,
        completed:!collapsed.completed,
        ongoing:true
    }));
};

const ToggleOngoingList = () => {
    setIsCollapsedArray(collapsed => ({
        bookingList:true,
        completed:true,
        ongoing:!collapsed.ongoing
    }));
};

return (
    <View style={{flex:1}}>
        <View style={{flex:0.5}}>
        <Image 
            source={require('../../Assets/Icons/overlay-01.png')}
            style={{resizeMode: 'repeat'}}
        />
        </View>
        <View style={{flex:1}}>
            <View style={{flex:1, backgroundColor:'white'}}>
                <Text style={{fontSize:20, fontWeight:'bold', marginLeft: 25, marginTop: 15}}>Trip List, Monday 4:20 PM</Text>
            </View>
            <View style={{flex:1, flexDirection:'row',backgroundColor:'white'}}>
                <View style={{flex:1, backgroundColor:'white', alignItems:'center', justifyContent:'center'}}>
                    <TouchableOpacity onPress={ToggleBookingList} style={{paddingTop:15, paddingBottom:15, paddingLeft:20, paddingRight:20, borderRadius:25,backgroundColor:'yellow'}}>
                        <Text style={{fontSize:15, fontWeight:'bold'}}>Upcoming</Text>
                    </TouchableOpacity>
                </View>
                <View style={{flex:1, backgroundColor:'white', alignItems:'center', justifyContent:'center'}}>
                    <TouchableOpacity onPress={ToggleCompletedList} style={{paddingTop:15, paddingBottom:15, paddingLeft:20, paddingRight:20, borderRadius:25,backgroundColor:'white'}}>
                        <Text style={{fontSize:15, fontWeight:'bold'}}>Completed</Text>
                    </TouchableOpacity>
                </View>
                <View style={{flex:1, backgroundColor:'white', alignItems:'center', justifyContent:'center'}}>
                    <TouchableOpacity onPress={ToggleOngoingList} style={{paddingTop:15, paddingBottom:15, paddingLeft:20, paddingRight:20, borderRadius:25,backgroundColor:'white'}}>
                        <Text style={{fontSize:15, fontWeight:'bold'}}>Ongoing</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
        <View style={{flex:4, backgroundColor:'white'}}>
            <Collapsible collapsed={isCollapsedArray.bookingList} align="center">
                <FlatList
                    contentContainerStyle={{paddingHorizontal: 10, paddingBottom: 20}}
                    data={userBookingData}
                    keyExtractor={(item) => item.id} 
                    renderItem={({item}) => <NewOrderPopUp navigation={navigation} driversLocation={route.params} {...item}/>}
                /> 
            </Collapsible>
            <Collapsible collapsed={isCollapsedArray.completed} align="center">
                <Text>Completed Lists</Text>
            </Collapsible>
            <Collapsible collapsed={isCollapsedArray.ongoing} align="center">
                <Text>OnGoing Lists</Text>
            </Collapsible>
        </View>
    </View>
);

Answer 2

试试下面的代码

const [expandedItem, setExpandedItem] = useState("");

const ToggleItem = (item) => {
    setExpandedItem(currentItem=>(currentItem==item?'':item))
};

return (
    <View style={{flex:1}}>
        <View style={{flex:0.5}}>
        <Image 
            source={require('../../Assets/Icons/overlay-01.png')}
            style={{resizeMode: 'repeat'}}
        />
        </View>
        <View style={{flex:1}}>
            <View style={{flex:1, backgroundColor:'white'}}>
                <Text style={{fontSize:20, fontWeight:'bold', marginLeft: 25, marginTop: 15}}>Trip List, Monday 4:20 PM</Text>
            </View>
            <View style={{flex:1, flexDirection:'row',backgroundColor:'white'}}>
                <View style={{flex:1, backgroundColor:'white', alignItems:'center', justifyContent:'center'}}>
                    <TouchableOpacity onPress={()=>toggleItem("upcoming")} style={{paddingTop:15, paddingBottom:15, paddingLeft:20, paddingRight:20, borderRadius:25,backgroundColor:'yellow'}}>
                        <Text style={{fontSize:15, fontWeight:'bold'}}>Upcoming</Text>
                    </TouchableOpacity>
                </View>
                <View style={{flex:1, backgroundColor:'white', alignItems:'center', justifyContent:'center'}}>
                    <TouchableOpacity onPress={()=>toggleItem("completed")} style={{paddingTop:15, paddingBottom:15, paddingLeft:20, paddingRight:20, borderRadius:25,backgroundColor:'white'}}>
                        <Text style={{fontSize:15, fontWeight:'bold'}}>Completed</Text>
                    </TouchableOpacity>
                </View>
                <View style={{flex:1, backgroundColor:'white', alignItems:'center', justifyContent:'center'}}>
                    <TouchableOpacity onPress={()=>toggleItem("ongoing")} style={{paddingTop:15, paddingBottom:15, paddingLeft:20, paddingRight:20, borderRadius:25,backgroundColor:'white'}}>
                        <Text style={{fontSize:15, fontWeight:'bold'}}>Ongoing</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
        <View style={{flex:4, backgroundColor:'white'}}>
            <Collapsible collapsed={expandedItem==="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>
            <Collapsible collapsed={expandedItem==="completed"} align="center">
                <Text>Completed Lists</Text>
            </Collapsible>
            <Collapsible collapsed={expandedItem==="ongoing"} align="center">
                <Text>OnGoing Lists</Text>
            </Collapsible>
        </View>
    </View>
);

也可以将名称移动到常量

const collapsables = {
    UPCOMING:"upcoming",
    COMPLETED:"completed",
    ONGOING:"ongoing",
}

如果一个选项卡打开，则关闭其他选项卡（react-native-collapsible）

Close other tabs if one is open (react-native-collapsible)

accordion

react-native

react-native-android