ScrollView onScroll 事件答案

【问题标题】：ScrollView onScroll eventScrollView onScroll 事件
【发布时间】：2017-12-21 09:28:07
【问题描述】：

反应原生：0.50.3

视频：https://youtu.be/Piz30mH4o1s

我想在滚动时隐藏或显示导航栏。当用户向下滚动时，我会更改导航栏的高度和内容的“paddingTop”位置。在多次触发'onScroll'事件之后，即使用户没有滚动。

我该如何处理？

【问题讨论】：

onScroll 在滚动期间每帧最多触发一次。所以你需要放一些东西来停止一次又一次地调用你的函数。设置超时或标志，以便停止调用该函数。

标签： react-native

【解决方案1】：

我会给你看一个类似的例子，希望对你有帮助：我假设您有 header 组件和 mainPage 组件。在 mainPage 中，您可以使用 onScroll 方法将 scrollY 值传递给标题组件，如下所示：

            onScroll={Animated.event([
          {
            nativeEvent: {
              contentOffset: {
                y:
                this.refs.header === undefined
                  ? 0
                  : this.refs.header.state.scrollY
              }
            }
          }
        ])}

与在标题组件中相比，您可以插入您的 scrollY 值以更改 headerHeight 或标题填充样式，如下所示

    const headerHeight = this.state.scrollY.interpolate({
  inputRange: [0, HEADER_SCROLL_DISTANCE],
  outputRange: [HEADER_MAX_HEIGHT, HEADER_MIN_HEIGHT],
  extrapolate: "clamp"
});

您必须像这样更改您的动画视图的样式：

<Animated.View style={[styles.someStyle, {height: headerHeight}]}></Animated.View>

请随时向我提问。

【讨论】：