React Native - WhatsApp wie Animation funktioniert nicht

Question

Ich versuche, eine Animation wie WhatsApp zu erreichen, wenn Sie mit dem Scrollen beginnen die Symbolleiste ist ausgeblendet und Liste nimmt es ist Platz dann wenn Scroll wieder hoch ist es wieder gezeigt, aber es funktioniert nicht für mich so Das ist es, was ich bekommen habe.

Ergebnis

-Code

<Animated.View 
    style={{ 
     height: this.state.scrollY.interpolate({ 
      inputRange: [0, 0.55, 1], 
      outputRange: [102, 102, 0], 
      extrapolate: 'clamp' 
     }), 
     backgroundColor: '#528eff', 
     flex: 0, 
     flexDirection: 'row', 
     justifyContent: 'center'}}> 
    <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}> 
     <Text style={{fontFamily: 'Roboto-Regular', fontSize: 14, color: 'rgba(255,255,255,0.87)'}}>Requests</Text> 
     <Text 
      style={{fontFamily: 'Roboto-Regular', fontSize: 36, color: 'rgba(255,255,255,0.87)'}}>{this.state.information.requests}</Text> 
     <View 
      style={{position: 'absolute', top: 50, bottom: 50, right: 0, width: 2, height: 25, backgroundColor: 'rgba(255,255,255,0.54)'}}/> 
    </View> 
    <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}> 
     <Text style={{fontFamily: 'Roboto-Regular', fontSize: 14, color: 'rgba(255,255,255,0.87)'}}>Total 
      value</Text> 
     <Text 
      numberOfLines={1} 
      ellipsizeMode={'tail'} 
      style={{marginLeft: 10, marginRight: 10, fontFamily: 'Roboto-Regular', fontSize: 36, color: 'rgba(255,255,255,0.87)'}}>{this.state.information.total}</Text> 
     <View 
      style={{position: 'absolute', top: 50, bottom: 50, right: 0, width: 2, height: 25, backgroundColor: 'rgba(255,255,255,0.54)'}}/> 
    </View> 
    <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}> 
     <Text style={{fontFamily: 'Roboto-Regular', fontSize: 14, color: 'rgba(255,255,255,0.87)'}}>From 
      (People)</Text> 
     <Text 
      style={{fontFamily: 'Roboto-Regular', fontSize: 36, color: 'rgba(255,255,255,0.87)'}}>{this.state.information.people}</Text> 
    </View> 
</Animated.View> 
<ListView 
    contentContainerStyle={{paddingBottom: 78}} 
    style={{height: this.windowHeight - 183}} 
    dataSource={this.state.expensesList} 
    scrollEventThrottle={1} 
    onScroll={ 
     Animated.event([{ 
      nativeEvent: { 
       contentOffset: { 
        y: this.state.scrollY 
       } 
      } 
     }]) 
    } 
    enableEmptySections={true} 
    renderRow={(rowData) => this._renderRow(rowData)}/> 

Answer 1

aus diesem Beispiel Siehe hier:

https://medium.com/@janicduplessis/react-native-scrollview-animated-header-10a18cb9469e#.dqq02kk49

Schieben Sie scrollEventThrottle = {1} nach scrollEventThrottle = {16}, um eine flüssige Animation zu erzielen.