ScrollView onScroll事件

Question

react-native: 0.50.3

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

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

我该如何处理这件事？

Answer 1

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

            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的样式：

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

请随时向我提出任何问题。