Native reagieren: Erstellen eines animierten Eingabefelds mithilfe der animierten API

Hallo allerseits! Heute teilen wir Ihnen kognitives Material mit, dessen Übersetzung speziell für Studenten des Kurses "ReactJS / React Native-Developer" erstellt wurde .



Also fangen wir an.

---

Wir alle haben diese Eingabefelder gesehen:



Die Beschriftung ist groß und sieht aus wie ein Platzhalter, bis Sie sich auf die Eingabe konzentrieren. Es wird kleiner und steigt auf.

Es sieht gut aus. Reibungslos. Tadellos.

Es scheint auch, dass dies nur ein erfahrener Entwickler kann, oder?
Nun, vielleicht war dies bis zum Aufkommen von React Native so, als die Menschen in Höhlen lebten und alle Arten von Wild schufen. Aber das gehört der Vergangenheit an.

Sie können das Video ansehen oder weiterlesen. Es hängt alles davon ab, was Sie bevorzugen.

Was versuchen wir zu erreichen?

Es gibt zwei Möglichkeiten für das, womit wir es zu tun haben.
Der erste ist, wenn das Eingabefeld nicht fokussiert ist.



Innerhalb des Eingabefelds wird eine Beschriftung angezeigt, deren Größe der Größe des Textfelds entspricht. Die Farbe ist matt. Dies ist der placeholder Eigenschaft sehr ähnlich.

Und die zweite Option, wenn der Fokus auf dem Eingabefeld liegt.



Die Beschriftung wird über dem Eingabefeld angezeigt, ist kleiner und die Farbe unterscheidet sich von der Farbe des eingegebenen Textes.

Einfachste Implementierung

Endlich können wir uns an die Arbeit machen. Bisher ohne Animationen.
Wie sich herausstellt, haben wir zwei UI-Zustände:

1. Es gibt keinen Fokus auf das Feld und die Inschrift innerhalb des Feldes.
2. Es liegt der Fokus auf dem Feld, eine Inschrift über dem Eingabefeld.

Tatsächlich könnten wir den Status speichern, ob der Fokus auf dem Feld liegt oder nicht. Abhängig von diesem Status können wir dann auswählen, wo die Inschrift platziert werden soll und welche Stile darauf angewendet werden sollen.

Da sich die Beschriftung an verschiedenen Stellen befinden muss und wir nicht möchten, dass sie die Platzierung der Komponenten beeinflusst, werden wir sie unbedingt positionieren. Um sicherzustellen, dass genügend Platz dafür vorhanden ist, müssen Sie der Umbruchansicht einen Einzug von oben hinzufügen.

 class FloatingLabelInput extends Component { state = { isFocused: false, }; handleFocus = () => this.setState({ isFocused: true }); handleBlur = () => this.setState({ isFocused: false }); render() { const { label, ...props } = this.props; const { isFocused } = this.state; const labelStyle = { position: 'absolute', left: 0, top: !isFocused ? 18 : 0, fontSize: !isFocused ? 20 : 14, color: !isFocused ? '#aaa' : '#000', }; return ( <View style={{ paddingTop: 18 }}> <Text style={labelStyle}> {label} </Text> <TextInput {...props} style={{ height: 26, fontSize: 20, color: '#000', borderBottomWidth: 1, borderBottomColor: '#555' }} onFocus={this.handleFocus} onBlur={this.handleBlur} /> </View> ); } } 

 <FloatingLabelInput label="Email" value={this.state.value} onChange={this.handleTextChange} /> 

Nach den vorherigen Schritten können wir Folgendes erreichen:

https://snack.expo.io/Sk006AbdW?session_id=snack-session-JRMksbYK3

Und das ist ein guter Ausgangspunkt. Bisher haben wir keine Animationen, aber wir können die Position der Inschrift bereits ändern, je nachdem, wo der Fokus liegt.

Warum nicht einen placeholder ?

Natürlich scheint die Verwendung der TextInput Eigenschaft des Platzhalters verlockend. Dies funktioniert jedoch nicht, da wir steuern möchten, wie, wann und wo die Inschrift angezeigt wird.

Stattdessen soll sich die Beschriftung im Textfeld befinden, wenn der Fokus darauf liegt. Und wir möchten, dass es nach oben geht, wenn der Fokus auf dem Eingabefeld erscheint, und dies kann nur erreicht werden, wenn wir mit demselben Element arbeiten.

Wie wäre es mit der Animation?

Eigentlich blieb der einfachste Teil.

Da wir zwei Zustände haben, in denen es möglicherweise eine Inschrift gibt, und wir je nach Fokus einen auswählen, ist die Animation dieses Übergangs zwischen den Zuständen selbst ziemlich trivial.

In diesem Handbuch können wir Folgendes hervorheben:

• Animated.Value bedeutet, ob der Fokus auf dem Feld liegt (1) oder nicht (0);
• Wir werden die Zahl beim Fokussieren schrittweise auf (1) und ansonsten auf (0) ändern.
• In Form dieser Zahl geben wir den Stil der Inschrift wieder: In (0) und (1) definieren wir Stile, und React Native berechnet automatisch Zwischenstile und wendet sie an. Und sogar Farben.

All dies umzusetzen ist nicht schwierig.

Animated.Value wir in componentWillMount initialisieren.

 componentWillMount() { this._animatedIsFocused = new Animated.Value(0); } 

Da der Wert dieser Nummer davon abhängen sollte, ob das Eingabefeld im Fokus steht oder nicht, und wir bereits über diese Statusinformationen verfügen, können wir die Funktion componentDidUpdate hinzufügen, die diese Nummer abhängig von this.state :

 componentDidUpdate() { Animated.timing(this._animatedIsFocused, { toValue: this.state.isFocused ? 1 : 0, duration: 200, }).start(); } 

Um den Stil der Inschrift in solchen Begriffen wiederzugeben, müssen wir nur zwei Änderungen vornehmen:

Wechseln Sie zu Animated.Text .

Anstatt Stile zum Definieren von Stilen zu verwenden, definieren Sie diese wie folgt:

 const labelStyle = { position: 'absolute', left: 0, top: this._animatedIsFocused.interpolate({ inputRange: [0, 1], outputRange: [18, 0], }), fontSize: this._animatedIsFocused.interpolate({ inputRange: [0, 1], outputRange: [20, 14], }), color: this._animatedIsFocused.interpolate({ inputRange: [0, 1], outputRange: ['#aaa', '#000'], }), }; 

https://snack.expo.io/Hk8VCR-dZ?session_id=snack-session-AJ4vulSVw

Noch eine Sache

Wenn Sie in der obigen Demo versuchen, etwas einzugeben und dann den Fokus aus dem Eingabefeld zu entfernen, sehen Sie etwas Seltsames.



Glücklicherweise ist dies ziemlich einfach zu beheben. Wir müssen nur zwei Zeilen im Code ändern.

Wir möchten überprüfen, ob das Eingabefeld leer ist, und den Status nur dann in "nicht fokussiert" ändern, wenn beide der folgenden Bedingungen erfüllt sind:

• Das Eingabefeld ist leer;
• Es gibt keinen Fokus auf das Feld.

Andernfalls möchten wir, dass der „fokussierte“ Stil angewendet und die Ersatzbeschriftung erhöht wird.

this.props wir den Status des Eingabefelds verfolgt haben , können wir mit this.props problemlos auf seinen Wert this.props .



https://snack.expo.io/ByZBAC-dZ?session_id=snack-session-YNZSqhqOC


Das ist alles Wir sehen uns beim kostenlosen Webinar .