ScrollView onScroll事件

Question

react-native：0.50.3

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

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

我该如何处理？

Answer 1

我会告诉你一个类似的例子ı希望它有所帮助： 我假设你有头组件和主页组件。在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：

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

随时向我提出任何问题。