反応ネイティブでAnimated.diffClampを使用する方法

Question

Animated.diffClampを実装する方法のコード例はありますか？

Google Playアプリで紹介されているようなヘッダースクロールアニメーションを作成しようとしています。スクロールダウンを開始するときにヘッダーはすでに非表示になっていますが、スクロールを開始するとすぐにヘッダーを再表示したいという問題があります。

class Services extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
    scrollY : new Animated.Value(0), 
    } 
} 

renderScrollViewContent(){ 
    return (
    <View style={styles.scrollViewContent}> 
    </View> 
) 
} 

render() { 
    const headerHeight = this.state.scrollY.interpolate({ 
    inputRange: [0, 60], 
    outputRange: [0, -60], 
    extrapolate: 'clamp' 
    }); 

    return (
    <View style={styles.container}> 
     <ScrollView style={styles.container} 
     scrollEventThrottle={16} 
     onScroll={Animated.event(
      [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}] 
     )} 
     > 
     {this.renderScrollViewContent()} 
     </ScrollView> 
     <Animated.View style={[styles.header, {top: headerHeight}]}> 
     <View style={styles.bar}> 
      <Text style={styles.title}>Title</Text> 
     </View> 
     </Animated.View> 
    </View> 
); 
} 
} 

Answer 1

これをこの使用例に正確に追加しました。ここにドキュメントページがありますhttps://facebook.github.io/react-native/docs/animated.html#diffclamp

また、トランスレートトランスフォームで使用することをお勧めします（パフォーマンスが向上し、ネイティブドライバでも使用できます）。ここにあなたの例では、それを使用してレンダリングします：どのように動作

const headerTranslate = Animated.diffClamp(this.state.scrollY, 0, 60) 
    .interpolate({ 
    inputRange: [0, 1], 
    outputRange: [0, -1], 
    }); 

return (
<View style={styles.container}> 
    <ScrollView style={styles.container} 
    scrollEventThrottle={16} 
    onScroll={Animated.event(
     [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}] 
    )} 
    > 
    {this.renderScrollViewContent()} 
    </ScrollView> 
    <Animated.View style={[styles.header, {transform: [{translateY: headerTranslate}]}]}> 
    <View style={styles.bar}> 
     <Text style={styles.title}>Title</Text> 
    </View> 
    </Animated.View> 
</View> 
); 

は、それが0と60の間にクランプされるように、我々は値のマイナスを作るために補間を使用した後、我々は（我々はそれがアップ翻訳したい、diffClampにスクロール位置を通過しています）。