OnScroll 折叠视图 - React Native

问题描述

我的数学真的很差，我正在尝试计算 scrollView 的顶部，因为我希望它位于顶部 View 的顶部，以便为 scrollView 腾出更多空间。

我知道我可以使用 urlpatterns = [ path('students/',views.StudentDetails.as_view(),name="student-register"),path('student/<int:pk>/',name="student-details"),] 来完成这个，但是由于一个组件 (Animate.View) 我无法做到这一点。所以我的 Idee 在我向下滚动时将组件 RecyclerListView 向上移动直到位于 ItemList，当我向上滚动时，我将移动直到值 scrollY 达到 0。

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

这是我的代码。

-150

更新

我已经按照@Nnay 说的做了，但并不顺利

<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"
  />

我已经这样做了

解决方法

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

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

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

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

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

然后，您的 show 类可以处理元素的 height，该元素将自动向下推送以下内容（前提是它不是绝对定位），您可以使用 {{1}在 css 中。否则会跳

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

transition: .25s

如果用户向上滚动，这将返回 this.show = oldPos - newPos > 0;，这似乎是您在链接中引用的行为

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

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

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

我还没有尝试在 react-native 中使用 AnimationsAPI，所以我建议先测试一下，因为它的性能要高得多。

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

确保将您的间隔存储在一个变量中，以便您可以清除它。

<View>

这样的事情应该可以工作。请记住，我已经多年没有使用间隔动画，因此您可能需要调整一些值

javascript react-native reactjs reactjs