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

Question

所以我有一个 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>

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

Answer 1

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

他们使用“react-native-section-list-get-item-layout”package。 该 package 提供的钩子用于计算具有渲染项元素高度和节标题高度的 SectionList 的 getItemLayout 属性的值

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