So lassen Sie Ihre React Native-App elegant reagieren, wenn die Tastatur angezeigt wird

Wenn Sie mit React Native-Apps arbeiten, besteht ein häufiges Problem darin, dass die Tastatur eingeblendet wird und Texteingaben ausgeblendet werden, wenn Sie sich auf diese konzentrieren. Etwas wie das:

Es gibt einige Möglichkeiten, wie Sie dies vermeiden können. Einige sind einfach, andere weniger. Einige können angepasst werden, andere nicht. Heute zeige ich Ihnen drei verschiedene Möglichkeiten, wie Sie die Tastatur in React Native umgehen können.

Ich habe den gesamten Quellcode für dieses Tutorial auf Github gestellt.

KeyboardAvoidingView

Die einfachste und am einfachsten zu installierende Lösung ist KeyboardAvoidingView. Es ist eine Kernkomponente, aber es ist auch ziemlich einfach in dem, was es tut.

Sie können den Basiscode nehmen, dessen Tastatur die Eingaben abdeckt, und diesen aktualisieren, sodass die Eingaben nicht mehr abgedeckt werden. Das erste, was Sie tun müssen, ist, den Behälter Viewdurch den zu ersetzen KeyboardAvoidingViewund dann eine behaviorRequisite hinzuzufügen . Wenn Sie sich die Dokumentation ansehen, werden Sie feststellen, dass sie 3 verschiedene Werte akzeptiert - Höhe, Polsterung, Position . Ich habe festgestellt, dass die Polsterung auf die vorhersehbarste Weise funktioniert. Das werde ich also verwenden.

import React from 'react'; import { View, TextInput, Image, KeyboardAvoidingView } from 'react-native'; import styles from './styles'; import logo from './logo.png'; const Demo = () => { return (         ); }; export default Demo;

Dies gibt uns das folgende Ergebnis. Es ist nicht perfekt, aber für kaum Arbeit ist es ziemlich gut.

Eine Sache zu beachten ist, dass Sie in Zeile 30 eine sehen View, deren Höhe auf 60px eingestellt ist. Ich habe festgestellt, dass die Tastatur, die die Ansicht vermeidet, mit dem letzten Element nicht ganz funktioniert und das Einstellen von Abstand / Rand nicht funktioniert. Also habe ich ein neues Element hinzugefügt, um alles um ein paar Pixel zu "erhöhen".

Das Bild oben wird bei Verwendung dieser einfachen Implementierung aus der Ansicht verschoben. Ich werde Ihnen am Ende zeigen, wie Sie das beheben können.

Android-Nutzer: Ich habe festgestellt, dass dies die beste / einzige Option ist. Durch Hinzufügen android:windowSoftInputMode="adjustResize"zu Ihrer AndroidManifest.xml übernimmt das Betriebssystem den größten Teil der Arbeit für Sie und das KeyboardAvoidingView erledigt den Rest. Beispiel AndroidManifest.xml. Der Rest dieses Artikels trifft wahrscheinlich nicht auf Sie zu.

Tastaturbewusstes ScrollView

Die nächste Option ist die reaktionsschnelle, tastaturbewusste Bildlaufansicht, die Ihnen viel Geld einbringt. Hinter den Kulissen wird eine ScrollView oder ListView verwendet, um alles zu handhaben (abhängig von der von Ihnen ausgewählten Komponente), wodurch die Scrolling-Interaktion ziemlich nahtlos wird. Der andere große Vorteil dieses Pakets besteht darin, dass es zu der Eingabe blättert, die im Fokus steht, was dem Benutzer eine schöne Erfahrung bietet.

Die Verwendung ist ebenfalls sehr einfach: Sie müssen lediglich den Container austauschen View, beginnend mit dem Basiscode, und einige Optionen festlegen. Hier ist der Code, dann werde ich ihn beschreiben.

import React from 'react'; import { View, TextInput, Image } from 'react-native'; import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view' import styles from './styles'; import logo from './logo.png'; const Demo = () => { return (        ); }; export default Demo;

Zunächst möchten Sie die Hintergrundfarbe der ScrollView so einstellen (wenn Sie das Scrollen wieder aktivieren), dass die Hintergrundfarbe immer dieselbe ist. Als nächstes möchten Sie der Komponente mitteilen, wo sich die Standardposition befindet, damit sie nach dem Schließen der Tastatur wieder an diese Stelle zurückkehrt. Wenn Sie diese Requisite weglassen, kann die Ansicht nach dem Schließen der Tastatur wie folgt oben hängen bleiben.

Nach der resetScrollToCoords- Requisite legen Sie den contentContainerStyle fest - dies ersetzt im Wesentlichen die zuvor enthaltenen ViewStile. Als letztes deaktiviere ich die Bildlaufansicht für die Benutzerinteraktion. Dies ist für Ihre Benutzeroberfläche möglicherweise nicht immer sinnvoll (z. B. für eine Benutzeroberfläche, in der ein Benutzer viele Profilfelder bearbeitet). In diesem Fall ist es jedoch nicht sinnvoll, dem Benutzer das manuelle Scrollen zu erlauben, da nichts zu scrollen ist zu.

Wenn Sie diese Requisiten miteinander kombinieren, erhalten Sie das folgende Ergebnis, das recht gut funktioniert.

Tastaturmodul

Dies ist bei weitem die manuellste Option, bietet Ihnen aber auch die meiste Kontrolle. Sie werden die animierte Bibliothek verwenden, um reibungslose Interaktionen zu ermöglichen, wie Sie sie zuvor gesehen haben.

Mit dem Tastaturmodul, das nicht auf der React Native-Site dokumentiert ist, können Sie vom Gerät ausgegebene Tastaturereignisse abhören. Die Ereignisse, die Sie verwenden, sind KeyboardWillShow und KeyboardWillHide , die unter anderem die Dauer der Animation und die Endposition der Tastatur zurückgeben.

Wenn Sie mit Android arbeiten, sollten Sie stattdessen keyboardDidShow und keyboardDidHide verwenden.

Wenn das KeyboardWillShow- Ereignis ausgegeben wird, setzen Sie eine animierte Variable auf die endgültige Höhe der Tastatur und lassen sie für die gleiche Dauer wie die Tastatur-Schiebeanimation animieren. Mit diesem animierten Wert können Sie die Auffüllung am unteren Rand des Containers festlegen, um den gesamten Inhalt zu verbessern.

Ich werde gleich Code zeigen, aber wenn wir das tun, was ich oben beschrieben habe, haben wir diese Erfahrung.

Ich möchte dieses Bild dieses Mal korrigieren. Dazu verwenden Sie einen animierten Wert, um die Höhe des Bildes zu verwalten, die Sie beim Öffnen der Tastatur anpassen. Hier ist der Code.

import React, { Component } from 'react'; import { View, TextInput, Image, Animated, Keyboard } from 'react-native'; import styles, { IMAGE_HEIGHT, IMAGE_HEIGHT_SMALL} from './styles'; import logo from './logo.png'; class Demo extends Component { constructor(props) { super(props); this.keyboardHeight = new Animated.Value(0); this.imageHeight = new Animated.Value(IMAGE_HEIGHT); } componentWillMount () { this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow); this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide); } componentWillUnmount() { this.keyboardWillShowSub.remove(); this.keyboardWillHideSub.remove(); } keyboardWillShow = (event) => { Animated.parallel([ Animated.timing(this.keyboardHeight, { duration: event.duration, toValue: event.endCoordinates.height, }), Animated.timing(this.imageHeight, { duration: event.duration, toValue: IMAGE_HEIGHT_SMALL, }), ]).start(); }; keyboardWillHide = (event) => { Animated.parallel([ Animated.timing(this.keyboardHeight, { duration: event.duration, toValue: 0, }), Animated.timing(this.imageHeight, { duration: event.duration, toValue: IMAGE_HEIGHT, }), ]).start(); }; render() { return (        ); } }; export default Demo;

Es steckt sicherlich viel mehr dahinter als jede andere Lösung. Anstelle eines normalen Viewoder ImageSie verwenden ein Animated.Viewund, Animated.Imagedamit die animierten Werte genutzt werden können. Der lustige Teil liegt wirklich in den Funktionen keyboardWillShow und keyboardWillHide , bei denen sich die animierten Werte ändern.

Dort ändern sich zwei animierte Werte parallel, die dann zur Steuerung der Benutzeroberfläche verwendet werden. Das lässt dich damit.

Es ist eine ganze Menge mehr Code, aber es ist ziemlich schick. Sie haben viele Optionen für das, was Sie tun können, und können die Interaktion wirklich nach Herzenslust anpassen.

Optionen kombinieren

Wenn Sie Code speichern möchten, können Sie einige Optionen kombinieren, was ich normalerweise tue. Wenn Sie beispielsweise Option 1 und 3 kombinieren, müssen Sie sich nur um die Verwaltung und Animation der Bildhöhe kümmern.

Der Code ist nicht viel kleiner als die Quelle von Option 3, aber mit zunehmender Komplexität einer Benutzeroberfläche kann er Ihnen ein wenig helfen.

import React, { Component } from 'react'; import { View, TextInput, Image, Animated, Keyboard, KeyboardAvoidingView } from 'react-native'; import styles, { IMAGE_HEIGHT, IMAGE_HEIGHT_SMALL } from './styles'; import logo from './logo.png'; class Demo extends Component { constructor(props) { super(props); this.imageHeight = new Animated.Value(IMAGE_HEIGHT); } componentWillMount () { this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow); this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide); } componentWillUnmount() { this.keyboardWillShowSub.remove(); this.keyboardWillHideSub.remove(); } keyboardWillShow = (event) => { Animated.timing(this.imageHeight, { duration: event.duration, toValue: IMAGE_HEIGHT_SMALL, }).start(); }; keyboardWillHide = (event) => { Animated.timing(this.imageHeight, { duration: event.duration, toValue: IMAGE_HEIGHT, }).start(); }; render() { return (        ); } }; export default Demo;

Jede Implementierung hat ihre Vor- und Nachteile - Sie müssen die für die gewünschte Benutzererfahrung am besten geeignete auswählen.

Möchten Sie mehr über die Verwendung von React Native zum Erstellen hochwertiger mobiler Apps erfahren? Melden Sie sich für meinen kostenlosen React Native-Kurs an!