OnScroll 折叠视图 - React Native

Question

我的数学真的很差，我正在尝试计算滚动视图的顶部，因为我希望它位于顶部视图的顶部，以便为滚动视图腾出更多位置。

我知道我可以使用 Animate.View 来完成此操作，但由于组件 (RecyclerListView) 我无法做到这一点。所以我的想法是，当我向下滚动时，我将组件 ItemList 向上移动直到位于 -150 并且当我向上滚动时，我将移动直到值 scrollY 达到 0。

Stack(here) 上已经有一个帖子显示了我想要的内容。

这是我的代码。

<View> this is the View i want to cover/fold <View>
<ItemList style={{top:scrollY}}
    onScroll={(nativeEvent, offsetX, offsetY)=>{
       // when scroll down, scrollY should not exeede 0
       // when i scroll up, scrollY should not be more -150
        var maxScroll = 0; 
        var minScroll = -150; 
        // How should i calculate and set setScrollY()
    }}
    columnPerRaw={columnPerRar}
    itemHeight={150}
    onIni={(s: any) => {
      setScroll(s);
    }}
    onItemPress={(item, index) => itemClick(item as item)}
    items={data ?? []}
    renderItem={renderItem}
    onEndReached={() => {
      if (globalContext.value.panination && !isLoading)
        setEffectTrigger(Math.random());
    }}
    keyName="name"
  />

更新

我已经像@Nnay 所说的那样做了，但它并不顺利

  var maxScroll = 0; // when i scroll up, scrollY should not be more then 0
                var minScroll = -150; // when scroll down, scrollY should not exeede -150
                var top = lastPos - offsetY;
                if (top >minScroll && top <=maxScroll)
                   setScrollY(top);
                lastPos = offsetY;

我已经做到了

Answer 1

无论您选择如何触发此行为（无论是滚动位置还是滚动方向），您都应该使用条件类。

要获取滚动方向，您需要存储上一个滚动位置。 如果oldPosition - newPosition < 0 向下滚动，则向上滚动。

如果您希望元素的位置触发它，您应该选择将布尔值设置为true 或false 来触发类。类似：

<View class={{this.show ? 'show' : ''}}>

其中show 是您的组件的本地布尔值。

您的show 类可以处理元素的height，该元素将自动向下推送以下内容（前提是它不是绝对定位），您可以通过在css 中使用transition: .25s 来平滑它。否则会跳转

然后您的滚动处理程序可以根据滚动方向设置布尔值，例如：

this.show = oldPos - newPos > 0;

如果用户向上滚动，这将返回 true，这似乎是您在链接中引用的行为

让我知道这是否满足您的问题，以便我可以相应地编辑和调整答案

ps：如果您只是设置元素的top，而它具有静态位置，它将不起作用。它也会跳到那个位置，因为你没有平滑任何东西

编辑：如果 CSS 动画和过渡不起作用并且您不能使用 react-native 的 Animate.View，则不需要外部包的唯一选项是在 react-native 不支持的情况下设置间隔动画AnimationsAPI

我还没有尝试在 react-native 中使用 AnimationsAPI，所以我建议先对其进行测试，因为它的性能要好得多。

如果你想使用间隔动画，我仍然建议坚持上面的boolean 解决方案，但删除该类并在style 的style 属性中添加一个height 变量@

确保将间隔存储在变量中，以便清除它。

if (this.height < 150 /* no idea what height you need, play around */ && show && !this.interval){ 
  this.interval = setInterval(() => {
    this.height += 1;
  }, 10)
} else if (this.height > 0 && !show && !this.interval) {
  this.interval = setInterval(() => {
   this.height -= 1;
  }, 10)
} else {
  clearInterval(this.interval)
}

这样的事情应该可以工作。请记住，我已经好几年没有使用间隔动画了，所以您可能需要尝试一些值