react-native：如何在 ScrollView onScroll 中添加 header animation

Question

我正在使用屏幕上的 ScrollView 实现动画 header。 在scrollView onScroll上，我还在scrollview Y position的基础上设置myview。 像这样

const onScroll = ({ nativeEvent: { contentOffset: { y, x } } }) => {
    let _currentSection;
    // loop sections to calculate which section scrollview is on
    state.sections.forEach((section, index) => {
      // adding 15 to calculate Text's height
      const moveToPOsition = wp('24') * 5.8 * index

      console.log((y), state[section], index, moveToPOsition)
      if ((y + 15) > moveToPOsition) _currentSection = index
    })
    // settint the currentSection to the calculated current section
    setState((currentState) => ({ ...currentState, currentSection: _currentSection }))
}

现在在实现动画 header 时，我需要在滚动上添加 animation 代码。 这个

const handleScroll = Animated.event(
    [
      {
        nativeEvent: {
          contentOffset: { y: scrollY.current },
        },
      },
    ],
    {
      useNativeDriver: true,
    },
  );

当我将两个代码一起添加并调用滚动视图的 onScoll 时，它们不起作用......而它们分别起作用。

const onScroll = ({ nativeEvent: { contentOffset: { y, x } } }) => {
    let _currentSection;
    // loop sections to calculate which section scrollview is on
    state.sections.forEach((section, index) => {
      // adding 15 to calculate Text's height
      const moveToPOsition = wp('24') * 5.8 * index

      console.log((y), state[section], index, moveToPOsition)
      if ((y + 15) > moveToPOsition) _currentSection = index
    })
    // settint the currentSection to the calculated current section
    setState((currentState) => ({ ...currentState, currentSection: _currentSection }))


    Animated.event(
      [
        {
          nativeEvent: {
            contentOffset: { y: scrollY.current },
          },
        },
      ],
      {
        useNativeDriver: true,
      },
    )

  }

像这样调用 onScoll

<Animated.ScrollView
   style={styles.scrollView}
   ref={scrollView}
   contentContainerStyle={{paddingTop: headerHeight}}
   scrollEventThrottle={100}
   bounces={false}
   onScroll={onScroll}>
   {state.sections.map(section => (
      <Item key={section.id} category={section}
            onItemLayout={onItemLayout} data={data} />
   ))}
</Animated.ScrollView>

Answer 1

我找到了解决方案

const onScroll = ({ nativeEvent: { contentOffset: { y, x } } }) => {
    let _currentSection;
    // loop sections to calculate which section scrollview is on
    state.sections.forEach((section, index) => {
      // adding 15 to calculate Text's height
      const moveToPosition = wp('24') * 5.8 * index
      // console.log((y), state[section], index, moveToPOsition)
      if ((y + 15) > moveToPosition) _currentSection = index
    })

    const moveTabToPosition = ((Screen.width) / 5) * _currentSection
    tabScrollView.current?.scrollTo({ x: moveTabToPosition, y: 0, animated: true });
    if (state.currentSection != _currentSection) {
      // settint the currentSection to the calculated current section
      setState((currentState) => ({ ...currentState, currentSection: _currentSection }))
    }
  }

并将其添加到 Animated.Event 链接中

const handleScroll = Animated.event(
    [
      {
        nativeEvent: {
          contentOffset: { y: scrollY.current },
        },
      },
    ],
    {
      useNativeDriver: true,
      listener: event => {
        onScroll(event);
      },
    },
  );