react native keyboard area

Reagieren Sie auf den nativen Tastaturbereich

Diese Bibliothek wird diese Probleme beheben:

• Wenn windowSoftInputMode auf adjustNothing gesetzt ist, funktionieren die React Native Keyboard-Ereignisse keyboardDidHide und keyboardDidShow nicht mehr (siehe Problem Nr. 2852).

• Wenn die Tastatur erscheint, wird der gesamte App-Inhalt nach oben verschoben (iOS und Android).

• Bei Chat-Anwendungen muss die untere Texteingabe in der gleichen Position bleiben, wenn die Tastatur geschlossen und einige Aktionen angezeigt werden. Der Wechsel erfolgt nicht so reibungslos.

Erste Schritte

$ yarn add react-native-keyboard-area

Es wird empfohlen, React Native > 0.60 zu verwenden. Durch die automatische Verknüpfung wird dieses bibliotheksnative RNKeyboard Modul für iOS und Android installiert.

Einführung

• Unter iOS: React Native stellt eine Komponente namens KeyboardAvoidingView bereit. Umschließen Sie Ihre Seite damit und sie verschiebt den Inhalt nach oben, wenn die Tastatur angezeigt wird.

• Unter Android: Standardmäßig ist in der Datei „AndroidManifest.xml“ der windowSoftInputMode auf adjustResize eingestellt. Der gesamte App-Inhalt wird nach oben verschoben, wenn die Tastatur angezeigt wird, sodass wir die Komponente KeyboardAvoidingView nicht benötigen.

In beiden Fällen wird der gesamte Seiteninhalt nach oben oder unten verschoben, dann wird die Tastatur angezeigt oder ausgeblendet.

Aber manchmal brauchen wir nicht die gesamte App, um nach oben zu gelangen. Das häufigste Beispiel ist eine Chat-Anwendung. Möglicherweise möchten wir zu einer benutzerdefinierten Ansicht wechseln, wenn die Tastatur verschwindet.

Hier kommt diese Bibliothek

Diese Bibliothek löst das Problem, indem sie eine Wrapper-Komponente KeyboardArea erstellt. Diese Komponente passt ihre Höhe an, dann erscheint oder verschwindet die Tastatur.

Darüber hinaus ist es auch möglich, den Status mit isOpen Requisiten oder mit den exponierten open() und close() Methoden zu steuern .

Ein weiterer Vorteil besteht darin, dass ReactNaive nicht die gesamte App neu zeichnet , wenn die Tastatur angezeigt wird, da sich die Größe der Hauptansicht nicht ändert.

Beispiel aus der Praxis: Vorher und Nachher

Vorher : Mit ReactNative KeyboardAvoidingView und AdjustResize ist das Ergebnis nicht sehr gut, die Seite „springt“, wenn die Tastatur nach dem Wechsel verschwindet	Nachher : ​​Bei Verwendung dieser Bibliothek wird die gesamte Ansicht nicht verschoben und der Tastaturbereich unter der Eingabe behält während des Wechsels die gleiche Höhe

Wie funktioniert es?

Diese Bibliothek verfügt über nativen iOS- und Android-Code, um die KeyboardArea Komponente über ein Ereignis namens KeyboardSizeChanges zu benachrichtigen, wenn sich die Tastaturhöhe ändert.

• Unter iOS verwenden wir einfach die UIResponder „keyboardWillShowNotification“ und „keyboardWillHideNotification“, um dann das Ereignis mit der aktuellen Höhe auszugeben.

• Unter Android müssen wir „ windowSoftInputMode“ auf adjustNothing setzen, um zu verhindern, dass sich die Tastatur in der gesamten Ansicht nach oben bewegt. Anschließend erstellen wir ein unsichtbares PopupWindow um die Layoutänderungen abzuhören und die Tastaturhöhe zu messen.

Verwendung

Der größte Teil der Logik befindet sich in der KeyboardArea Komponente. Wir müssen lediglich den Inhalt umschließen, der angezeigt werden soll, wenn die Tastatur verschwindet, und dann die isOpen- Requisiten festlegen, wenn wir im folgenden Beispielfall die ChatActionsInput -Komponente anzeigen müssen.

** Dies ist eine vereinfachte Version der obigen Screenshots **

 import { KeyboardArea , KeyboardAreaRef } from 'react-native-keyboard-area' ;

/// ...
keyboardSpacerRef = createRef < KeyboardSpacerRef > ( ) ;

handleUserClick = ( ) => {
    this . keyboardSpacerRef . current ?. close ( ) ;
}

handleChangeMode = ( ) => {
    this . setState ( prev => ( {
      inputMode :
        prev . inputMode === ChatInputModes . Actions
          ? ChatInputModes . Text
          : ChatInputModes . Actions ,
    } ) ) ;
}

keyboardAreaHeightChanged = ( isOpen : boolean , currentHeight : number ) => {
  // Your logic
} ;

render ( ) {

    return (
        < PageContent >
            < ChatMessageList />
            < ChatTextInput onChangeMode = { this . handleChangeMode } />
            < KeyboardSpacer
                ref = { this . keyboardSpacerRef }
                isOpen = { inputMode === ChatInputModes . Actions }
                onChange = { this . keyboardAreaHeightChanged }
            >
                < ChatActionsInput />
            </ KeyboardSpacer >
        </ PageContent >
    ) ;
} 

Android-Notizen

Da wir unter Android möglicherweise „adjustResize“ für die anderen Seiten verwenden möchten, können wir diese Bibliothek setWindowSoftInputMode verwenden, um den SoftInput-Modus nur für die Seiten, die wir benötigen, dynamisch zu ändern, zum Beispiel:

 import { RNKeyboard , SoftInputMode } from 'react-native-keyboard-area' ;

// Example with react-navigation page focus/blur events

componentDidMount ( ) {
  navigation . addListener ( 'blur' , this . componentDidExit ) ;
  navigation . addListener ( 'focus' , this . componentDidEnter ) ;
}

componentDidEnter = ( ) => {
  if ( Platform . OS === 'android' ) {
    RNKeyboard . setWindowSoftInputMode ( SoftInputMode . SOFT_INPUT_ADJUST_NOTHING , ) ;
  }
} ;

componentDidExit = ( ) => {
  if ( Platform . OS === 'android' ) {
    RNKeyboard . setWindowSoftInputMode ( SoftInputMode . SOFT_INPUT_ADJUST_RESIZE ) ;
  }
} ;

componentWillUnmount ( ) {
  navigation . removeListener ( 'blur' , this . componentDidExit ) ;
  navigation . removeListener ( 'focus' , this . componentDidEnter ) ;
}

Credits

Für Android gehen alle Credits an Cristian Holdunu und Siebe Brouwer für die Implementierung der PopupWindow Idee und um die Tastaturhöhe zu berechnen, habe ich sie einfach in das React Native-Modulsystem portiert.