ScrollView onScrollイベント

Question

が反応し、ネイティブ：0.50.3

VIDEO：https://youtu.be/Piz30mH4o1s

を私は非表示にしたり、スクロール上のナビゲーションバーを表示したいです。ユーザーがスクロールダウンすると、ナビゲーションバーの高さと内容の 'paddingTop'の位置が変更されます。その後、ユーザーがスクロールしなくても、 'onScroll'イベントが数回トリガーされます。

どうすればこの問題に対処できますか？

Answer 1

似たような例が表示されます。 ヘッダーコンポーネントとメインページコンポーネントがあると仮定します。メインページでは、このようなonScroll方法でヘッダ・コンポーネントにscrollY値を渡すことができます

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

とヘッダコンポーネントよりも、あなたはこの

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

ようheaderHeightまたはヘッダパディングスタイルを変更するために、あなたのごscrollY値を補間することができます

uはあなたのanimated.viewこのようなスタイルを変更するには持っているより：

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

私にどんな質問をお気軽に。