1

我正在使用 RN 0.62.2，但是当我尝试使用具有不同高度的 4000 多行的 SectionList 并尝试使用该scrollToIndex方法时，我得到了错误：

Invariant Violation：scrollToIndex 应该和 getItemLayout 或 onScrollToIndexFailed 一起使用，否则无法知道屏幕外索引的位置或处理失败。

我做了一些研究并意识到我应该使用getItemLayout道具来告诉列表它的大小并且能够准确地识别我要跳转到的位置，但是我浏览了几个论坛并且找不到正确的方法使用它，我已经使用 NPM 库进行了处理：react-native-section-list-get-item-layout 并sectionlist-get-itemlayout按照此链接的指南进行操作， 但我仍然找不到让我sectionlist工作的方法，请帮忙。非常感谢您提前。

我的代码是：

function Catalog({ navigation, route }) {

    const [products, setProducts] = React.useState([]);

    React.useEffect(() => {

        async function getProducts() {
            const result = await API.getProducts(route.params.id);
            setProducts(result);
        }
        getProducts();
    }, [])

    _getItemLayout = sectionListGetItemLayout({
        // The height of the row with rowData at the given sectionIndex and rowIndex
        getItemHeight: (rowData, sectionIndex, rowIndex) => sectionIndex === 0 ? 100 : 50,
   
        // These five properties are optional
        getSeparatorHeight: () => 1, // The height of your separators between items
        getSectionHeaderHeight: () => 66.5, // The height of your section headers
        getSectionFooterHeight: () => 0, // The height of your section footers
        listHeaderHeight: 0, // The height of your header
        listFooterHeight: 0, // The height of your footer
      });

     renderEmpty = () => <Empty text="Cargando productos..." />

    renderItem = ({ item }) => (
        <Product title={item.title} {...item} />
    )

    renderTab = ({ title, isActive }) => (
        <View
            style={[
                styles.tabContainer,
                { borderBottomWidth: isActive ? 2 : 0 }
            ]}
        >
            <Text
                style={[
                    styles.tabText,
                    { color: isActive ? '#d00000' : '#56555a' }
                ]}
            >
                {title.toUpperCase()}
            </Text>
        </View>
    )

    return (
        <View style={styles.container} >
            <View style={styles.banners}>
                <Slider horizontal={true} />
            </View>
            <View style={styles.list}>
               <SectionList
                    sections={products}
                    keyExtractor={item => item.title}
                    stickySectionHeadersEnabled={false}
                    //scrollToLocationOffset={100}
                    //initialNumToRender={100}
                    //removeClippedSubviews={true}
                    tabBarStyle={styles.tabBar}
                    ItemSeparatorComponent={() => <View style={styles.separator} />}
                    ListEmptyComponent={renderEmpty}
                    renderTab={renderTab}
                    renderSectionHeader={({ section }) => (<CategoryListLayout style={styles.header} title={section.title} />)}
                    renderItem={renderItem}
                    getItemLayout={this._getItemLayout}

                />
            </View>
        </View>    
    );
}
export default Catalog

4

0 回答 0