Question

我是本土和js的新手。

我希望在用户开始在任何时间/位置向上滚动时显示我的导航栏，并在用户开始在任何位置向下滚动时隐藏我的导航栏。

我的第一种方法是使用“动画”和“找出滚动方向”，但我失败了。任何人都可以告诉我详细的可能性吗？

谢谢！

Answer 1

在滚动视图中，将onScroll功能添加到滚动视图中。

调用该函数时，请检查滚动的方向：

var currentOffset = event.nativeEvent.contentOffset.y;
var direction = currentOffset > this.offset ? 'down' : 'up';
if(direction == 'down') {
    // hide the nav
} else {
    // show the nav
}

我希望它对你有帮助！

Answer 2

基于类似的要求，当用户向上滚动（隐藏）和ScrollDown（显示）时，我不得不隐藏位于屏幕底部的操作栏。受到其他答案的启发。这就是我所做的-

const [oldOffset, setOldOffset] = useState(0);

<ScrollView
  styleContainer={styles.container}
  onScrollBeginDrag={event => {
    const currentOffset = event.nativeEvent.contentOffset.y;
    setOldOffset(currentOffset);
    if (!(currentOffset < 0) && currentOffset !== 0) {
      if (currentOffset < oldOffset) {
        console.log('up');
      } else {
        console.log('down');
      }
    }
  }}
>
</ScrollView>

由于我不太担心演出/隐藏的延迟，所以我确保我不会出现错误的状态。

根据滚动方向反应原生显示/隐藏导航栏

2 个答案: