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

Question

我是 react native 和 js 的新手。

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

我的第一个方法是同时使用“动画”和“找出滚动方向”，但我失败了。谁能告诉我详细的怎么可能？

谢谢！

Answer 1

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

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>

因为我不太担心显示/隐藏延迟，所以我确保不会出现错误状态。

Answer 2

在您的滚动视图中，将 onScroll 函数添加到您的滚动视图中。

当函数被调用时，检查滚动的方向：

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

希望对你有帮助！