我正在使用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}
        />
    )
}

我try 了多种解决方案,比如使用包含该初始位置的InitialNumToRender和getItemLayout,但没有任何帮助.

推荐答案

我找到了解决这个问题的办法.在调用scroll ToLocation之前必须添加延迟.

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

React-native相关问答推荐

在原生react 中更改图像源URI时闪烁

Reaction-原生NavBottom设计背景

如何在 React / React Native 中使用 Emscripten 编译的 JavaScript

React Native Navigation const { navigate } = this.props.navigation;

React-Native:无法从我的 android 应用程序打开设备设置

react-native:如何在离线模式下在模拟器上运行应用程序?

如何在 React Native 中访问原生 UI 组件的实例方法

React Native Maps:标记图像不显示在 react-native-maps 中使用自定义标记

试图注册两个同名的视图 RNGestureHandlerButton

有没有办法改变 IOS 标题上react-navigation 的默认后退按钮 colored颜色 ?

java.lang.ClassNotFoundException:在路径上找不到类.MainActivity:DexPathList react-native

无法在 react native >= 0.60 中链接assets(字体)

如何使用 Typescript 在无状态组件上设置 navigationOptions

xcode 10错误:multiple commands produce

在 OPTIONS 响应后使 fetch API 与 CORS 一起工作

在 componentWillUnmount 中清除超时的更好方法

当前未启用语法nullishCoalescingOperator

如何在 React Native 中更改 textInput 占位符的字体系列

加载字体native-base 错误

如何在 React-Native 中停止touch 事件传播