我有一个react native应用程序。我正在使用react-native-paper来处理列表中的卡片。
我在卡片上有文本细节，它必须充当按钮。因为如果用户按下文本细节，那么就会发生一些事情。在这种情况下，显示list. accordion。
但我面临的问题是，我不知道如何触发文本细节。
所以我有一个包含一些默认内容的组件。因为数据来自一个API调用：

/* eslint-disable prettier/prettier */

import {
    ButtonDetail,
    CategoryCard,
    CategoryGroupCardCover,
    Detail,
} from "./category-info-card.styles";

import { Card } from "react-native-paper";
import { React } from "react";
import { Text } from "../../../components/typography/text.component";

export const CategoryInfoCard = ({ category = {} }) => {
    const {
        name = "Zoogdieren",
        images = "https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492_960_720.jpg",
        icon = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSE3_hmm2zWrH4ZLUoqEr4FUb5f-BIn9_c5Qg&usqp=CAU",
        detail = "Detail",
    } = category;

    return (
        <CategoryCard
            elevation={5}
            style={{
                borderTopLeftRadius: 0,
                borderTopRightRadius: 0,
                borderBottomLeftRadius: 0,
                borderBottomRightRadius: 0,
            }}>
            <Text variant="caption" style={{ left: 100 }}>
                {name}
            </Text>
            <CategoryGroupCardCover source={{ uri: images }} />
            <Card.Actions>
                <ButtonDetail>
                    <Detail>{detail}</Detail>
                </ButtonDetail>
            </Card.Actions>         
        </CategoryCard>
    );
};

我正在使用库styling. components。因此ButtonDetail看起来：

export const ButtonDetail = styled.TouchableOpacity`
    background-color: ${(props) => props.theme.colors.bg.primary};
    width: 100%;
`;

加载数据的组件是：

export const CategoryScreen = ({ navigation }) => {
    const { loading, error, categoryList } = useContext(CategoryContext);
    const [breakfastExpanded, setBreakfastExpanded] = useState(false);
    //console.log(navigation);
    return (
        <SafeArea>
            {loading && (
                <LoadingContainer>
                    <ActivityIndicator animating={true} color={MD2Colors.green200} />
                </LoadingContainer>
            )}
            <Search />
            <CategoryList
                data={categoryList}
                renderItem={({ item }) => {
                    return (
                        <TouchableOpacity
                            onPress={() => navigation.navigate("groepen", { subcategories: item.id })}>
                            <Spacer position="top" size="large">
                                <CategoryInfoCard category={item} />
                            </Spacer>

                            <List.Accordion
                                title="Breakfast"
                                left={(props) => <List.Icon {...props} icon="bread-slice" />}
                                expanded={breakfastExpanded}
                                onPress={() => setBreakfastExpanded(!breakfastExpanded)}>
                                <List.Item title="Eggs Benedict" />
                                <List.Item title="Classic Breakfast" />
                            </List.Accordion>
                        </TouchableOpacity>
                    );
                }}
                keyExtractor={(item) => item.id}
            />
        </SafeArea>
    );
};

但是当你看到用户点击卡片时，用户会被导航到一些子类别。所以这一切都很好。但是我只是不知道如何触发细节文本，以便显示list.accordinon。
问：如何触发明细文本？
好吧，我分开了，就像：

<CategoryList
                data={categoryList}
                renderItem={({ item }) => {
                    return (
                        <>
                            <TouchableOpacity
                                onPress={() => navigation.navigate("groepen", { subcategories: item.id })}>
                                <CategoryInfoCard category={item} expandedCallBack={handlePress} />
                            </TouchableOpacity>

                            <List.Accordion
                                title="Breakfast"
                                left={(props) => <List.Icon {...props} icon="bread-slice" />}
                                expanded={breakfastExpanded}
                                onPress={() => setBreakfastExpanded(!breakfastExpanded)}>
                                <List.Item title="Eggs Benedict" />
                                <List.Item title="Classic Breakfast" />
                            </List.Accordion>
                        </>
                    );
                }}
                keyExtractor={(item) => item.id}
            />

所以你可以点击 accordion 而不会触发整张卡片。但是细节文本仍然会触发整张卡片。
如果我按下详细信息。那么这也将被触发：

<TouchableOpacity
                                onPress={() => navigation.navigate("groepen", { subcategories: item.id })}>
                                <CategoryInfoCard category={item} />
                            </TouchableOpacity>

当然不一定是。