4

我正在使用 react-native-elementsListItem.Accordion因为我的 React Native 中的所有其他内容都SectionList使用ListItems（并且文档似乎对此没有意见），而且我对渲染非常满意。不幸的是，当向下滚动时，它会滚动到最后显示的项目之外，直到所有手风琴项目都完全展开时到达终点。

显然，当所有手风琴项目都展开时，它会在到达末尾时停止滚动。

SectionList当手风琴项目未展开时，如何才能仅滚动到可见的内容？

    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>
    )
4

1 回答 1

1

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

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

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

于 2021-06-09T03:07:04.880 回答