如何将动画用于边距和填充？

问题描述

我正在尝试制作自定义粘性标题。 基本上这是我想要做的布局。当滚动 scrollview 上升一半标题高度然后滚动内容。这里

const [scrollPos,setScrollPos]= useState(0);

<Header />
<ScrollView
   onScroll={
      setScrollPos(Math.floor(e.nativeEvent.contentOffset.y));
   }
   scrollEventThrottle={16}
   style={{
       marginTop:
             scrollPos >= 0 && scrollPos < 150
               ? -50 - scrollPos
               : scrollPos < 0
               ? -50
               : -200,paddingTop:
             scrollPos >= 0 && scrollPos < 150
               ? scrollPos
               : scrollPos < 0
               ? 0
               : 150,}}

/>

除标题外，还有不同的移动部分使用相同的 scrollPos 来改变不透明度和显示样式属性。

这适用于 IOS，但在 android 上，当边距更改时，滚动视图会上下弹跳。

所以我想做的是要么用动画来做，要么在有人能帮忙的情况下修复这种方法。

使用 Animated 我尝试了这个并卡住了。

<Animated.ScrollView
   onScroll={
               Animated.event(
            [
              {
                nativeEvent: {
                  contentOffset: {
                    y: scrollY,},],{ useNativeDriver: true }
          )
   }
   scrollEventThrottle={16}
   style={{
                transform: [
            {
              translateY: scrollY.interpolate({
                inputRange: [0,150],outputRange: [-50,-150],}),}}

/>

解决方法

你能不能试试这个。我认为您应该将一个函数传递给 ScrollView 的 onScroll 属性。

const [scrollPos,setScrollPos]= useState(0);

<ScrollView
   onScroll={
      () => setScrollPos(Math.floor(e.nativeEvent.contentOffset.y));
   }
  ...
/>