ScrollView onScroll event

Question

react-native：0.50.3

视频：https：//youtu.be/piz30mh4o1s

我想在滚动中隐藏或显示纳维栏。当用户向下滚动时，我会更改Navbar和" Paddingtop"内容位置的高度。之后，即使用户不滚动，" croll"事件触发了几次。

我该如何处理？

Answer 1

我会向你展示类似的榜样。希望它能有所帮助：我认为您有标题组件和主页组件。在主页中，您可以使用类似的croll方法传递给标头组件的scrolly值：

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

，而不是在标题组件中，您可以插入您的Sclolly价值以更改标题或标题填充样式

    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>

随时向我问任何问题。