react-native:如何在ScrollView onScroll中添加header动画

Question

我正在使用屏幕上的 ScrollView 实现动画 header。在 scrollView onScroll 上，我也在滚动视图 Y 位置的基础上设置 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 我需要添加动画代码 onScroll。这个

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

当我将这两个代码添加到一起并调用 scrollview 的 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 link this

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

react-native:如何在ScrollView onScroll中添加header动画

react-native: How to add header animation in ScrollView onScroll

javascript

scrollview

reactjs

react-native

react-animations