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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）