react-native：如何在 ScrollView onScroll 中添加标题动画

如何解决react-native：如何在 ScrollView onScroll 中添加标题动画

我正在屏幕上使用 ScrollView 实现动画标题。在scrollView onScroll 我也在scrollview 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 }))
}

现在在实现动画标题时，我需要添加动画代码 onScroll。 这个

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

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

const onScroll = ({ nativeEvent: { contentOffset: { y,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>

解决方法

我找到了解决方案

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);
      },);