javascript - React Native Elements ListItem.Accordion 项目导致 SectionList 滚动(远)超出预期

Question

我正在使用 react-native-elements ListItem.Accordion因为我的 React Native 中的所有其他内容 SectionList使用 ListItem s(并且文档似乎对此没有意见)，我对渲染非常满意。不幸的是，当向下滚动时，它会滚动到最后显示的项目之外，直到到达末尾 会是 如果 所有的 Accordion 项目都得到了充分的扩展。
显然，当所有 Accordion 项目都展开时，它会在到达末尾时停止滚动。
我如何获得 SectionList只滚动到 Accordion 项未展开时可见的内容？

    const renderSectionHeader = ({ section: { title, data } }) => {
        return { data.length > 0 ? (
            <Text>{title}</Text>
        ) : null };
    }

    const renderSeparator = () => {
        return (
            <View style={{
                height: 1,
                backgroundColor: "#CED0CE",
                marginLeft: "5%",
                width: "90%",
            }} />
        );
    };

    const renderItem = ({ item }) => {
        return (
            <ListItem.Accordion
                content={
                    <>
                        <MaterialIcons.Button
                            name="shopping-basket"
                            style={{paddingLeft:20}}
                            onPress={() => { alert(item.greeting) }} />
                        <ListItem.Content style={{marginLeft:15}}>
                            <ListItem.Title>{item.title}</ListItem.Title>
                            <ListItem.Subtitle>{item.subtitle}</ListItem.Subtitle>
                        </ListItem.Content>
                    </>
                }
                isExpanded={isExpanded}
                onPress={() => {
                    toggleAccordionItem(item.key);
                }}
            >
                <ListItem item={item}>
                    <MaterialIcons.Button
                        name="airport-shuttle"
                        onPress={() => { alert(item.direction) }}>
                        <Text>Show Direction</Text>
                    </MaterialIcons.Button>
                </ListItem>
            </ListItem.Accordion>
        );
    };

    return (
        <SafeAreaView>
            <SectionList
                refreshing={!isRefreshing}
                sections={sections}
                renderItem={renderItem}
                renderSectionHeader={renderSectionHeader}
                ItemSeparatorComponent={renderSeparator}
                keyExtractor={(item) => item.key}
            />
        </SafeAreaView>
    )

Answer 1

上周刚开始使用 React Native，但我针对类似情况的解决方法是像这样在 Accordion 内使用 ListItem

{isExpanded && <ListItem item={item} />}

但它使 Accordion 的动画变得笨拙。不知道哪个是解决问题的正确方法，如果有人以前经历过这个问题并且知道什么是解决问题的正确方法，我将不胜感激