react native keyboard area

reaccionar-área-teclado-nativo

Esta biblioteca abordará estos problemas:

• Cuando se configura windowSoftInputMode para adjustNothing , los eventos de React Native Keyboard, keyboardDidHide y keyboardDidShow , dejarán de funcionar (consulte el problema n.º 2852).

• Cuando aparezca el teclado, todo el contenido de la aplicación se moverá hacia arriba (iOS y Android).

• Para la aplicación de chat que necesita mantener la entrada de texto inferior en la misma posición cuando cierra el teclado y muestra algunas acciones, el cambio no será tan sencillo.

Empezando

$ yarn add react-native-keyboard-area

Se recomienda utilizar React Native > 0.60, el enlace automático instalará este módulo RNKeyboard nativo de la biblioteca para iOS y Android.

Introducción

• En iOS: React Native proporciona un componente llamado KeyboardAvoidingView , envuelve tu página con eso y subirá el contenido cuando aparezca el teclado.

• En Android: de forma predeterminada, en AndroidManifest.xml tenemos windowSoftInputMode configurado en adjustResize , todo el contenido de la aplicación se moverá hacia arriba cuando aparezca el teclado, por lo que no necesitamos el componente KeyboardAvoidingView .

En ambos sentidos, todo el contenido de la página se moverá hacia arriba o hacia abajo y luego el teclado aparecerá o desaparecerá.

Pero a veces no necesitamos toda la aplicación para avanzar, el ejemplo más común es una aplicación de Chat, es posible que queramos cambiar a una Vista personalizada cuando el teclado desaparezca.

Aquí viene esta Biblioteca

Esta biblioteca resuelve el problema creando un componente contenedor KeyboardArea , este componente ajustará su altura y luego el teclado aparecerá o desaparecerá.

Además, también es posible controlar el estado con los accesorios isOpen o con los métodos expuestos open() y close() .

Otro beneficio es que ReactNaive no volverá a pintar toda la aplicación cuando aparezca el teclado, ya que la vista principal no cambiará su tamaño.

Ejemplo del mundo real: antes y después

Antes : usando ReactNative KeyboardAvoidingView y ajustarResize, el resultado no es muy bueno, la página "salta" cuando el teclado desaparece después del cambio	Después : al usar esta biblioteca, toda la vista no se moverá y el área del teclado debajo de la entrada mantendrá la misma altura durante el cambio.

¿Cómo funciona?

Esta biblioteca tiene código nativo de iOS y Android para notificar, a través de un evento llamado KeyboardSizeChanges , al componente KeyboardArea cuando cambia la altura del teclado.

• En iOS solo usamos UIResponder KeyboardWillShowNotification y KeyboardWillHideNotification para luego emitir el evento con la altura actual.

• En Android, necesitamos configurar windowSoftInputMode para adjustNothing , para evitar que el teclado suba en toda la vista, luego creamos una PopupWindow invisible para escuchar los cambios de diseño y medir la altura del teclado.

Uso

La mayor parte de la lógica está dentro del componente KeyboardArea , solo necesitamos ajustar el contenido que queremos mostrar cuando el teclado desaparezca y luego configurar los accesorios isOpen cuando necesitemos mostrar, en el siguiente caso de ejemplo, el componente ChatActionsInput .

** esta es una versión simplificada de las capturas de pantalla anteriores **

 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 >
    ) ;
} 

notas de android

Dado que en Android es posible que queramos usar ajustarResize para las otras páginas, podemos usar esta biblioteca setWindowSoftInputMode para cambiar dinámicamente el modo SoftInput solo para las páginas que necesitamos, por ejemplo:

 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 ) ;
}

Créditos

Para Android, todos los créditos son para Cristian Holdunu y Siebe Brouwer por la implementación de la idea PopupWindow y para calcular la altura del teclado, simplemente lo transfiero al sistema del módulo React Native.