OnScroll 折叠视图 - React Native

Question

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

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

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

这是我的代码。

<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

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

要获取滚动方向，您需要存储之前的滚动 position。 如果oldPosition - newPosition < 0您向下滚动，否则您向上滚动。

如果您希望元素的 position 触发它，您应该选择将 boolean 设置为true或false ，从而触发 class。 就像是：

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

其中show是组件本地的 boolean。

然后，您的show class 可以处理元素的height ，这将自动将以下内容向下推（前提是它不是绝对定位的），您可以通过使用transition: .25s中的 .25s。 否则会跳

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

this.show = oldPos - newPos > 0;

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

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

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

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

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

如果你想使用间隔 animation，我仍然建议坚持上面的boolean解决方案，但删除 class 并在<View>的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)
}

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