在本机反应中回调 scrollToLocation答案

【问题标题】：callback to scrollToLocation in react native在本机反应中回调 scrollToLocation
【发布时间】：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}
        />

【问题讨论】：

标签： javascript reactjs react-native scroll react-native-sectionlist

【解决方案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

【讨论】：