Wie man Animated.diffClamp in reaktivem nativem verwendet

Question

Jedes Codebeispiel, wie man Animated.diffClamp implementiert?

Ich versuche eine Header-Scroll-Animation wie die in der Google Play App zu erstellen. Ich verstecke bereits die Kopfzeile, wenn Sie mit dem Scrollen beginnen, aber das Problem ist, dass ich die Kopfzeile wieder anzeigen möchte, sobald Sie mit dem Scrollen beginnen, es wird nur angezeigt, wenn Sie den oberen Rand der Ansicht erreichen.

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

Wir haben dies genau für diesen Anwendungsfall hinzugefügt. Hier ist die Doc-Seite https://facebook.github.io/react-native/docs/animated.html#diffclamp

Ich empfehle auch, es mit einer Translate-Transformation zu verwenden (bessere perf und kann mit nativen Treiber verwendet werden). Hier ist Ihr Beispiel macht es mit:

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> 
); 

Wie es funktioniert ist, dass wir die Bildlaufposition zu diffClamp passieren, so dass es zwischen 0 und 60 eingespannt ist, nachdem wir Interpolation verwenden, um den Wert negativ zu machen (wir wollen, dass es übersetzen up).