javascript React Native SectionList滚动到部分

hyrbngr7  于 2023-04-19  发布在  Java
关注(0)|答案(5)|浏览(188)

我刚刚将ListView更改为React Native的新SectionList,现在当我尝试使用scrollTo函数时,应用程序崩溃,说明它未定义。我试图查找可能有帮助的新/替代函数,但它们似乎都不起作用。
使用新的SectionList以编程方式滚动到特定部分的正确协议是什么?
到目前为止我一直在咨询的链接:https://facebook.github.io/react-native/releases/0.43/docs/virtualizedlist.html#scrolltoend
我目前的尝试:

var params = {animated:true,offset:Platform.OS == "ios" ? 244 : 264}
_mainListView.scrollToOffset(params)
puruo6ea

puruo6ea1#

<SectionList
          ref={(sectionList) => { this.sectionList = sectionList }} .../>

this.sectionList.scrollToLocation(
        {
          sectionIndex: sectionIndex,
          itemIndex: itemIndex
        }
      );

这就是我使用这篇文章和https://snack.expo.io/HJp9mEQkG的混合来让它工作的方法

iq0todco

iq0todco2#

scrollToSection = (sectionIndex,itemIndex = 1 ) => {
 this.refs.foo.scrollToLocation({
      sectionIndex: sectionIndex,
      itemIndex: itemIndex
    });
}

sectionList:

<SectionList
 ref = "foo",
 //something
/>
uqzxnwby

uqzxnwby3#

这是我滚动到结尾的方式

listRef.current?.scrollToLocation({
  animated: true,
  sectionIndex: sections.length - 1,
  itemIndex: sections[sections.length - 1].data.length - 1,
})

这就是我如何滚动到顶部

listRef.current?.scrollToLocation({
  animated: true,
  sectionIndex: 0,
  itemIndex: 0,
})
jm81lzqq

jm81lzqq4#

对我来说解决方法是

list.current?.getScrollResponder()?.scrollTo({ x: 0, y: 0, animated: false })
uajslkp6

uajslkp65#

SectionList滚动到结尾

const [listViewHeight, setListViewHeight] = useState(undefined);

<SectionList
      onRefresh={onRefresh}
      sections={sectionListData}
      renderItem={renderItem}
      renderSectionHeader={renderSectionHeader}

onLayout={event => {
        setListViewHeight(event.nativeEvent.layout.height)
}}
onContentSizeChange={(w, h) => {
        scrollViewRef?.current?.getScrollResponder()?.scrollTo({
          y: h - listViewHeight
        })
}}

相关问题