React Native scrollToLocation from sectionlist in ios is not working.在Android上,列表滚动回索引0,但在iOS上不会发生同样的情况

hivapdat  于 2023-08-07  发布在  React
关注(0)|答案(2)|浏览(133)

我使用一个SectionList来呈现一个部分列表,下面是代码片段。我在Android上测试过,当部分更改时,列表会滚动回索引0,但在iOS上不会发生这种情况。

export const ListSymbol = ({
    region = '',
    currency = '',
    rate = '',
    channel = {},
    sections = [],
    loading = false,
    fetchData=null,
    renderItem: renderItemOptional = null,
    renderSectionHeader: renderSectionHeaderOptional = null
}) => {
    const [sectionsExpanded, setSectionsExpanded] = useState([])
    const [itemsGraphShow, setItemsGraphShow] = useState([])
    const sectionListRef = useRef()

    useEffect(() => {
        setSectionsExpanded([]);
        setItemsGraphShow([]);
        if (!isEmpty(sections)) {
             scrollToSection();
        }
    }, [sections])

    const keyExtractor = (item, index) => `list symbol - ${channel?.channelName} ${item?.symbol} ${item?.groupTitle} ${item?.unitCode} ${item?.unitName} ${index}`
    const renderSectionHeader = () => null

    const scrollToSection = () => {
        console.log("@@@@ scrollToSection", sectionListRef);
        sectionListRef.current?.scrollToLocation({
            animated: true,
            sectionIndex: 0,
            itemIndex: 0,
            // viewPosition: 0,
            // viewOffset: 0
        });
    };
    
    const scrollToIndexFailed = info => {
        const wait = new Promise(resolve => setTimeout(resolve, 500));
        wait.then(() => {
            sectionListRef.current?.scrollToIndex({ index: info?.index, animated: true });
        });
    }

    const renderItem = ({ item = {}, index = 0, section = [] }) => {
        return (
            <SymbolItem
                {...{
                    region,
                    currency,
                    rate,
                    item,
                    index,
                    section,
                    sectionsExpanded,
                    setSectionsExpanded,
                    itemsGraphShow,
                    setItemsGraphShow
                }}
            />
        )
    }

    return (
        <SectionList
            ref={sectionListRef}
            onScrollToIndexFailed={scrollToIndexFailed}
            refreshing={loading}
            onRefresh={fetchData}
            nestedScrollEnabled
            sections={sections}
            keyExtractor={keyExtractor}
            renderItem={renderItemOptional || renderItem}
            renderSectionHeader={renderSectionHeaderOptional || renderSectionHeader}
            showsVerticalScrollIndicator={false}
        />
    )
}

字符串
我尝试了多种解决方案,比如使用initialNumToRender,其中包含初始位置和getItemLayout,但没有帮助。

91zkwejq

91zkwejq1#

找到了解决这个问题的办法。必须在调用scrollToLocation之前添加延迟。

const wait = new Promise(resolve => setTimeout(resolve, 500));
wait.then(() => {
        sectionListRef.current?.scrollToLocation({
            y: 0,
            animated: true,
            sectionIndex: 0,
            itemIndex: 0,
            viewPosition: 0
        })
    });

字符串

ndh0cuux

ndh0cuux2#

如果不使用scrollToLocation,而是使用scrollTo
例如:

sectionListRef.current?.scrollTo({ x: 0, y: 0, animated: true })

字符串
返回到0,0位置。

相关问题