使用 React Native 中的大量数据滚动到 SectionList 的底部答案

【问题标题】：Scroll to bottom of SectionList with a lot of data in React Native使用 React Native 中的大量数据滚动到 SectionList 的底部
【发布时间】：2022-08-12 06:51:58
【问题描述】：

所以我有一个 SectionList ，其中包含从用户联系人中提取的数据。旁边是一个字母列表，其中包含他们拥有的联系人的第一个字母。当他们点击一个字母时，它意味着滚动并将他们带到该部分。就像原生 Iphone 联系人屏幕的工作方式一样。

我的问题是用户可能有很多联系人，所以我无法设置 initialNumToRender。如果用户有一堆联系人并且他们单击 Z，它还没有呈现，我得到我必须使用 onScrollToIndexFailed 或 getItemLayout 的错误。但我不知道如何使用这些属性中的任何一个来滚动到我需要的位置。这是组件

<View style={containerStyle}>
        
        <SectionList
        style={{width:\'90%\'}}
        ref={scrollRef}
        
        sections={formattedData}
        renderItem={({item}) => props.renderItem(item)}
        renderSectionHeader={({ section: { title } }) => (
            <Text
            style={textStyle}>
                 {title}
            </Text>
        )}
        />

        <ScrollView contentContainerStyle={alphabetStyle}>
            {formattedData?.length && formattedData.map((e,i) => {
                return(
                    <TouchableOpacity
                    onPress={()=>{
                        scrollRef.current.scrollToLocation({sectionIndex: i, itemIndex: 0})
                    }}>
                        <Text style={titleStyle}>{e.title}</Text>
                    </TouchableOpacity>
                )
            })}
        </ScrollView>



    </View>

任何帮助将不胜感激。谢谢你。

标签： javascript android ios react-native

【解决方案1】：

感谢 reddit.com 上的 /u/Nielrien，

他们使用“react-native-section-list-get-item-layout”，并为 SectionList 上的 getItemLayout 属性值输入元素和节标题的高度。

https://snack.expo.dev/@martymfly/sectionlist

【讨论】：