は、初心者のための

Question

謝罪はネイティブ質問に反応onScrollネイティブの限界に反応....

私はListViewのスクロールに合わせてアニメーションを入れています：

<ListView scrollEventThrottle={16} 
    onScroll={ 
     Animated.event([{nativeEvent: {contentOffset: { y: this.state.animTranslateY}}}] 
     ) 
    } 
    ... 
/> 

<Animated.View style={[{height: 50, 
    position: 'absolute', 
    right: 0, 
    left: 0, 
    top: 0, 
    transform: [{ translateY: this.state.animTranslateY.interpolate({ 
     inputRange: [0, this.state.infoHeight], 
     outputRange: [this.state.infoHeight, 0] }) }] 
    }]} 
}> 
    ... 
</Animated.View> 

私はそのようなアニメーションを制限したい場合は、いったんユーザーが特定の距離（たとえば100ピクセル）をスクロールした場合、イベントはもはや発生せず、アニメーション表示を効果的に固定します。

私はonScrollイベント（if (event.nativeEvent.contentOffset.y < 100) {}）に条件を挿入しようとしましたが、構文がオフです。私は別の関数を作成しようとしましたが、これをAnimated.eventと一緒に使用することはできません（そしては、scrollEventThrottleでさえも驚異的な効果をもたらします）。

誰でも適切に条件を挿入する方法をお勧めできますか？またはAnimated.eventを使用して関数を生成しますか？

ありがとうございます！

Answer 1

代わりにScrollViewを試してください。これにはscrollEnabledという小道具があります。これは、ユーザーがそれ以上スクロールできないようにしたい場合にfalseにすることができます。 ScrollViewにはonScrollもありますので、ここでロジックを実装するのは簡単です。ここで

はScrollViewのためのドキュメントです：https://facebook.github.io/react-native/docs/scrollview.html#scrollenabled

Answer 2

はこれを行うにはextrapolate clampを使用してください。ドキュメントから： '既定では、与えられた範囲を超えてカーブを外挿しますが、出力値をクランプすることもできます。'出力値をクランプすることで、最後の出力値に達するとアニメーションが停止します。

transform: [{ translateY: this.state.animTranslateY.interpolate({ 
    inputRange: [0, this.state.infoHeight], 
    outputRange: [this.state.infoHeight, 0] }) }], 
    extrapolate: 'clamp' 
}]} 

inputRangeがthis.state.infoHeightに達すると、このコードは翻訳を停止します。