React Native 响应本地ScrollView -快速滚动到下一个/上一个stickyHeaderIndices

fnx2tebb  于 2022-12-04  发布在  React
关注(0)|答案(1)|浏览(185)

当我向上滚动时,我想让ScrollView滚动到下一个粘滞标题,而当向下滚动时,它应该滚动到上一个粘滞标题。我在ScrollView中有多个stickyHeaderIndices。如何实现这一点?
我有这样的东西

<ScrollView
 onScroll={(event) => {
  code here
 }}
 decelerationRate="fast"
 snapToStart={false}
 disableIntervalMomentum={true}
 stickyHeaderIndices={[0, 2, 4, 6, 8, 10]}
 snapToEnd={false}>
    <Text>Header</Text> // intially load here
    <Text>lorem ipsum</Text>
    <Text>Header</Text> // scroll to here
    <Text>lorem ipsum</Text>
    <Text>Header</Text> // scroll to here
    <Text>lorem ipsum</Text>
    <Text>Header</Text> // scroll to here
    <Text>lorem ipsum</Text>
    <Text>Header</Text> // scroll to here
    <Text>lorem ipsum</Text>
    <Text>Header</Text> // scroll to here
    <Text>lorem ipsum</Text>
</ScrollView>
h43kikqp

h43kikqp1#

若要达成这个行为,您可以使用ScrollViewonScroll事件来检查使用者是向上或向下卷动,然后决定要卷动到的下一个或上一个粘滞信头索引。接着您可以使用ScrollViewscrollTo方法,顺利地卷动到想要的位置。
下面是一个如何实现此操作的示例:

import { ScrollView, View, Text } from 'react-native';

const MyScrollView = () => {
  const [scrollOffset, setScrollOffset] = useState(0);
  const stickyHeaderIndices = [0, 2, 4, 6, 8, 10];

  const onScroll = (event) => {
    // Calculate the current scroll position
    const currentOffset = event.nativeEvent.contentOffset.y;
    // Determine if the user is scrolling up or down
    const isScrollingUp = currentOffset > scrollOffset;

    let nextStickyIndex = 0;

    // If the user is scrolling up, find the next sticky header index
    if (isScrollingUp) {
      for (let i = 0; i < stickyHeaderIndices.length; i++) {
        if (currentOffset < stickyHeaderIndices[i]) {
          nextStickyIndex = stickyHeaderIndices[i];
          break;
        }
      }
    } else { // If the user is scrolling down, find the previous sticky header index
      for (let i = stickyHeaderIndices.length - 1; i >= 0; i--) {
        if (currentOffset > stickyHeaderIndices[i]) {
          nextStickyIndex = stickyHeaderIndices[i];
          break;
        }
      }
    }

    // Scroll to the next sticky header index
    if (nextStickyIndex > 0) {
      this.scrollView.scrollTo({ x: 0, y: nextStickyIndex, animated: true });
    }

    // Save the current scroll position
    setScrollOffset(currentOffset);
  };

  return (
    <ScrollView
      ref={(ref) => { this.scrollView = ref; }}
      onScroll={onScroll}
      decelerationRate="fast"
      stickyHeaderIndices={stickyHeaderIndices}
    >
      <Text>Header</Text> // initially load here
      <Text>lorem ipsum</Text>
      <Text>Header</Text> // scroll to here
      <Text>lorem ipsum</Text>
      <Text>Header</Text> // scroll to here
      <Text>lorem ipsum</Text>
      <Text>Header</Text> // scroll to here
      <Text>lorem ipsum</Text>
      <Text>Header</Text> // scroll to here
      <Text>lorem ipsum</Text>
      <Text>Header</Text> // scroll to here
      <Text>lorem ipsum</Text>
    </ScrollView>
  );
};

在本例中,我们使用useState钩子跟踪当前滚动偏移量,并确定用户是向上还是向下滚动。

相关问题