在本机反应中回调 scrollToLocation

Posted 2023-03-17

【中文标题】在本机反应中回调 scrollToLocation

【英文标题】：callback to scrollToLocation in react native

【发布时间】：2021-04-29 06:52:47

【问题描述】：

我正在尝试在我的 react native 部分列表中完成滚动动量后运行一个函数。

参考文档后，我发现了有关 onMomentumScrollEnd 的信息。但问题是onMomentumScrollEnd 仅在我们手动滚动部分列表时有效。但我在函数中使用scrollToLocation 滚动到特定部分。使用 onMomentumScrollEnd 时似乎不会触发。使用scrollToLocation时如何在滚动完成时触发此功能@

<SectionList
          sections=groupActivities
          keyExtractor=(item) => item?.id?.toString()
          ref=sectionList
          getItemLayout=getItemLayout
          onMomentumScrollEnd=() => console.log('ends')
          renderItem=( section:  title , item, index ) => 
            const sectionTitle = String(title);
            return (
              <View style=activityContainer>
                <MCard
                  startTime=getFormattedStartTime(item.duration?.start)
                />
              </View>
            );
          
          renderSectionHeader=( section:  title  ) => (
            <MText>
              setSectionTitle
            </MText>
          )
          refreshing=groupActivityLoading
          onRefresh=handleRefresh
        />

【参考方案1】：

你是如何触发scrollToLocation的？

请使用 refs 检查我的示例：

  const Example = () => 
  const sectionListRef = useRef(null);

  return (
    <SafeAreaView style=styles.container>
      <Button
        title="Scroll"
        onPress=() => 
          sectionListRef.current.scrollToLocation(
            itemIndex: 6,
          );
        
      />
      <SectionList
        ref=sectionListRef
        onMomentumScrollEnd=() => alert('ends')
        sections=DATA
        keyExtractor=(item, index) => item + index
        renderItem=(item) => <Item title=item />
        renderSectionHeader=(section: title) => (
          <Text style=styles.header>title</Text>
        )
      />
    </SafeAreaView>
  );
;

---

完整代码： 如果你想在你的设备上测试，这里是完整的代码：

https://gist.github.com/TiagoEsterisco/076887546530a509ee602318f92ca7ac