react-native 滚动到分区列表中的位置问题

dfty9e19  于 2022-10-29  发布在  React
关注(0)|答案(1)|浏览(215)

描述

我使用reactnativesectionlist来显示数据部分,
我必须在按下按钮的同时滚动到特定部分。
但是在滚动定位功能方面面临着一些问题,比如Cannot read the property 'data' of undefined, js engine: herms
甚至我已经给了足够的数据滚动在节列表。
我已经附上了代码。并附上下面的截图

版本

0.67.3

npx react-native info的输出

系统:
操作系统:Windows 10
CPU:12个x64英特尔®酷睿™ i5-10400 CPU,主频2.90 GHz
内存容量:967.80 MB / 15.79 GB
二进制文件:
节点:16.17.0 - C:\程序文件\节点\节点. EXE
纱号:1.22.19 - ~\AppData\漫游\npm\纱号.CMD
npm:8.15.0 - C:\程序文件\节点\npm.CMD
观察员:未找到
软件开发工具包:
Android软件开发工具包:未找到
Windows软件开发工具包:
允许在没有开发许可证的情况下进行开发:已启用
IDE:
Android工作室:未找到
视觉工作室:未找到
语言:
Java:11.0.14 - C:\程序文件\公用文件\Oracle\Java\Java路径\javac.EXE
npm程序包:
@React-本地-社区/客户端:未找到
React:17.0.2 =〉17.0.2
原生React:0.67.3 =〉0.67.3
React-本机-窗口:未找到
npm全局程序包:

  • 原生React *:未找到

重现步骤

当我单击按钮滚动到面临问题的特定位置时,

零食、代码示例、屏幕截图或指向存储库的链接

const SessionCardList = ({ data, viewType, isPoster, activeTabScreen, user, initialTabIndex, tabIndex, navigation, lastDayVisited, ...props }) => {
    const { id } = data
    const tabRef = useRef({})
    const Item = ({ data, index, isLast, isPoster = false }) => {
        return (
            <View style={[{ marginBottom: isLast ? 15 : 0 }]} key={`item_session_${data._id}`}>
                {<Card index={index} item={data} key={`item_card_${data._id}_card`} full navigation={navigation} config={props.activeConference} user={user} type={viewType} isPoster={isPoster} activeTabScreen={activeTabScreen.current} />}
            </View>
        );
    }

    setTimeout(() => {
        if (initialTabIndex === tabIndex.current) {
            tabRef?.current?.scrollToLocation(
                {
                    animated: true,
                    sectionIndex: 3,
                    itemIndex: 1,
                    viewOffset: 0.5,
                }
            );
        }
    }, 500);

    reactotron.log({ "render session card": "" });

    return <>
        <SectionList
            sections={data}
            keyExtractor={(item, index) => index}
            ref={tabRef}
            renderItem={({ item, index }) => {
                return (<Item title={item.title} data={item} index={index} />)
            }}
            renderSectionHeader={({ section, index }) => {
                return (
                    <View style={[localStyle.listHeader, localStyle.primaryBackgroundColor]}>
                        <Text style={localStyle.listHeaderText}>{section.title}</Text>
                    </View>
                )
            }}
            stickySectionHeadersEnabled={true}
            key={'SectionList' + id}
            initialNumToRender={5}
            onScrollToIndexFailed={(err) => {
                const wait = new Promise(resolve => setTimeout(resolve, 600));
                wait.then(() => {
                    if (initialTabIndex === tabIndex.current) {
                        tabRef?.current?.scrollToLocation(
                            {
                                animated: true,
                                sectionIndex: 3,
                                 itemIndex: 1,
                                viewOffset: 0.5,
                            }
                        );
                    }
                });
            }}
        />
    </>
}

export default memo(SessionCardList);
w9apscun

w9apscun1#

你好@sankar9659。我遇到了同样的问题,我发现SectionList组件在scrollToLocation方法中使用了props.sections[i].data。如果props.sections未定义,可能会导致这个问题。所以我通过添加一个if条件来解决。

const hasData = data[sectionIndex]?.data

if (hasData) {
   // scrollToLocation
}

希望能有所帮助!
原始程式码
//虚拟化节列表. js

相关问题