React Native - Animierte Funktionskomponenten

Ich liebe die React Native animierte API, aber es konfligiert stark mit meiner bevorzugten Art des Schreibens von Komponenten, die völlig zustandslose funktionale Komponenten ist.React Native - Animierte Funktionskomponenten

Nehmen Sie diese Komponente als Beispiel. Wie würde ich das Bild animieren, ohne zur Klassensyntax zurückzukehren, und eine Statusvariable, um den Bildstil zu steuern?

const Logo =() => (
    <View style={styles.container}> 
    <View style={styles.imageContainer}> 
     <Animated.Image 
     resizeMode='contain' 
     style={styles.image} 
     source={require(img/sample.png')} 
     /> 
    </View> 
    </View> 
) 

export default Logo

Quelle

2017-07-07 Brian F

Ich meine, wenn die Komponenten einen Zustand haben müssen (was am wahrscheinlichsten ist, weil es animiert ist), können Sie nicht viel tun, wenn überhaupt, mit der Klassensyntax. Funktionale Komponenten sind lediglich präsentative ohne Staat, nur Requisiten. – Li357

Ja, ich denke du hast Recht. Ich möchte nur einen Weg, um es nur Animationen zu isolieren, wie ich finde, sobald eine Komponente geöffnet ist, um zu sagen, dass es eine Müllhalde wird. –

Sie können Store verwenden, um animierte Werte natürlich zu behalten. Aber IMO ist es eine schlechte Idee. Benutze einfach Klassen. Sie sollten flexibler sein;)

Als Alternative können Sie https://github.com/oblador/react-native-animatable mit deklarativer Syntax versuchen. Ich habe es vorher nicht benutzt, aber es sieht so aus, als könnte es helfen.

Quelle

2017-07-07 02:13:36 farwayer

Ich denke, diese Bibliothek oder ihre Methode, Animation in eine andere Komponente zu verpacken, um den Status zu isolieren, ist der beste Weg. Prost. –

React Native - Animierte Funktionskomponenten

Antwort

Verwandte Themen