React Native - Animated.spring blinkt beim Zurücksetzen der Animation

Question

In meiner nativen App reagiere ich versuchen, eine Schublade zu erstellen. Wenn ich auf einen Knopf klicke, sollte er sich öffnen, und das funktioniert ganz gut, das Problem ist, wenn ich es schließe. Wenn ich auf die Schaltfläche zum Schließen klicke, blinkt die Animation, etwa so, als würde sie sich 2-3 Mal öffnen und schließen, bevor sie endgültig schließt.

Dies ist, wie ich es

export default class Drawer extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      height: new Animated.Value(0) 
     } 
    } 

    showContent =() => { 
     Animated.spring(this.state.height, {toValue:130}).start(); 
    } 

    hideContent =() => { 
     Animated.spring(this.state.height, {toValue:0}).start(); 
    } 

    render() { 
     return (
      <View> 
       <TouchableHighlight 
        onPress={this.showContent} 
        underlayColor="transparent" 
       > 
        <Text>Show</Text> 
       </TouchableHighlight> 

       <TouchableHighlight 
        onPress={this.hideContent} 
        underlayColor="transparent" 
       > 
        <Text>Hide</Text> 
       </TouchableHighlight> 

       <Animated.View style={{height: this.state.height}}> 
        <Text>Content</Text> 
       </Animated.View> 
      </View> 
     ); 
    } 
} 

Answer 1

Der Grund für die Animation zu ‚blinken‘ erscheint mache, weil Sie eine Feder Animation verwenden, die oder prallt prallt, sobald es seinen endgültigen Wert erreicht. Versuchen Sie spring mit timing ersetzen loszuwerden, die Bounce zu erhalten:

showContent =() => { 
    Animated.timing(this.state.height, {toValue:130}).start(); 
} 

hideContent =() => { 
    Animated.timing(this.state.height, {toValue:0}).start(); 
} 

Answer 2

Gerade in der gleichen Ausgabe lief. Sie können immer noch Animated.spring verwenden, aber es benötigt die korrekte Mindesthöhe für den zusätzlichen "Wiggle Room". Scheint es kann variieren, in meinem Fall war es eine min Höhe 2 für eine maximale Höhe von 55.

Answer 3

Ich bin ziemlich spät, aber ich hatte dieses Problem und löste nur mit der Config bounciness: 0, um das Blinzeln vollständig zu deaktivieren.

Sie können weitere Informationen über in the documentation finden.