por Spencer Carli
Cuando trabaja con aplicaciones React Native, un problema común es que el teclado aparece y oculta las entradas de texto cuando se enfoca en ellas. Algo como esto:
Hay algunas maneras de evitar esto. Algunos son simples, otros menos. Algunos se pueden personalizar, otros no. Hoy te mostraré 3 formas diferentes de evitar el teclado en React Native.
He puesto todo el código fuente de este tutorial.en Github.
TecladoEvitandoVer
La solución más simple, y la más fácil de instalar, esTecladoEvitandoVer. Es un componente central, pero también es bastante simple en lo que hace.
Puedes tomar elcodigo base, que tiene el teclado cubriendo las entradas, y actualícelo para que las entradas ya no estén cubiertas. Lo primero que tienes que hacer es volver a colocar el contenedor.Vistacon elTecladoEvitandoVery luego agregar uncomportamientoapoyarlo. Si observa la documentación, verá que acepta 3 valores diferentes:altura, relleno, posición. he encontrado esorellenofunciona de la manera más predecible. Así que eso es lo que usaré.
import React from 'react';import { View, TextInput, Image, KeyboardAvoidingView } from 'react-native';importar estilos desde './styles';importar logo from './logo.png';const Demo = () = > { return ( );};exportar demostración predeterminada;Esto nos da el siguiente resultado. No es perfecto, pero para casi cualquier trabajo, es bastante bueno.
Una cosa a tener en cuenta es que en la línea 30 verá unVistaque tiene una altura establecida en 60px. Descubrí que la vista de evitación del teclado no funciona del todo con el último elemento, y la configuración de relleno/margen no funcionó. Así que agregué un nuevo elemento para "aumentar" todo unos pocos píxeles.
La imagen en la parte superior queda fuera de la vista cuando se usa esta implementación simple. Te mostraré cómo puedes arreglar eso al final.
Usuarios de Android: He descubierto que esta es la mejor/única opción. Añadiendoandroid:windowSoftInputMode="ajustarRedimensionar"a su AndroidManifest.xml, el sistema operativo se encargará de la mayor parte del trabajo por usted y KeyboardAvoidingView se encargará del resto.Ejemplo AndroidManifest.xml. Es probable que el resto de este artículo no se aplique a usted.Vista de desplazamiento con reconocimiento de teclado
La siguiente opción es lareaccionar-native-keyboard-aware-scroll-viewlo que le da mucho valor por su dinero. Detrás de escena, está usando ScrollView o ListView para manejar todo (según el componente que elija), lo que hace que la interacción de desplazamiento sea bastante fluida. El otro gran beneficio de este paquete es que se desplazará a la entrada que está enfocada, lo que le brinda al usuario una experiencia agradable.
El uso también es muy fácil: solo necesita cambiar el contenedorVista, nuevamente comenzando con elcodigo basey configure algunas opciones. Aquí está el código, luego lo describiré.
importar React desde 'react'; importar { View, TextInput, Image } desde 'react-native'; importar { KeyboardAwareScrollView } desde 'react-native-keyboard-aware-scroll-view'importar estilos desde './styles'; importar logotipo de './logo.png';const Demo = () => { return ( );};exportar demostración predeterminada;En primer lugar, desea configurar elcolor de fondode ScrollView de esa manera (si tuviera que volver a habilitar el desplazamiento), el color de fondo es siempre el mismo. A continuación, desea decirle al componente dónde está la posición predeterminada para que, una vez que se cierre el teclado, vuelva a ese lugar; al omitir este apoyo, la vista podría quedarse atascada en la parte superior después de cerrar el teclado, así.
Después de laresetScrollToCoordsapoyo que establece elcontenidoContainerStyle —esto esencialmente reemplaza el que contieneVistaestilos que tenías antes. Lo último que estoy haciendo es deshabilitar la vista de desplazamiento de la interacción del usuario. Es posible que esto no siempre tenga sentido para su interfaz de usuario (como una interfaz en la que un usuario está editando muchos campos de perfil), pero para este sí lo tiene, no tiene mucho sentido permitir que el usuario se desplace manualmente porque no hay nada para desplazarse. a.
Combinando estos accesorios obtienes el siguiente resultado, que funciona bastante bien.
Módulo de teclado
Esta es, con mucho, la opción más manual, pero también le brinda el mayor control. Utilizará la biblioteca animada para ayudar a brindar interacciones fluidas como las que vio antes.
El módulo de teclado, que no está documentado en el sitio de React Native, le permite escuchar eventos de teclado emitidos desde el dispositivo. Los eventos que usará sontecladoWillShowytecladoSe ocultará, que devuelven el tiempo que tardará la animación y la posición final del teclado (entre otra información).
Si está en Android, querrá usar keyboardDidShow y keyboardDidHide en su lugar.
Cuando eltecladoWillShowse emite un evento, establecerá una variable animada a la altura final del teclado y hará que se anime durante la misma duración que la animación de deslizamiento del teclado. Luego usa este valor animado para establecer el relleno en la parte inferior del contenedor para aumentar todo el contenido.
Mostraré el código en un momento, pero hacer lo que describí anteriormente nos deja con esta experiencia.
Quiero arreglar esa imagen esta vez. Para hacerlo, utilizará un valor animado para administrar la altura de la imagen, que ajustará cuando se abra el teclado. Aquí está el código.
importar React, { Componente } de 'react'; importar { Ver, Entrada de texto, Imagen, Animado, Teclado } de 'react-native'; importar estilos, { IMAGE_HEIGHT, IMAGE_HEIGHT_SMALL} de './styles'; importar logotipo de '. /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(); este.keyboardWillHideSub.remove(); } KeyboardWillShow = (evento) => { Animated.parallel([ Animated.timing(this.keyboardHeight, { duración: event.duration, toValue: event.endCoordinates.height, }), Animated.timing(this.imageHeight, { duración : evento.duración, aValor: IMAGE_HEIGHT_SMALL, }), ]).start(); }; keyboardWillHide = (evento) => { Animated.parallel([ Animated.timing(this.keyboardHeight, { duración: event.duration, toValue: 0, }), Animated.timing(this.imageHeight, { duración: event.duration, toValue: IMAGE_HEIGHT, }), ]).start(); }; render() { return ( ); }};exportar demostración predeterminada;Ciertamente hay mucho más que cualquiera de las otras soluciones. En lugar de un normalVistaoImagenestás usando unVista.animadayImagen.animadapara que los valores animados se puedan aprovechar. La parte divertida está realmente en eltecladoWillShowytecladoSe ocultaráfunciones donde los valores animados están cambiando.
Lo que sucede allí es que dos valores animados cambian en paralelo y luego se utilizan para impulsar la interfaz de usuario. Eso te deja con esto.
Es una buena cantidad más de código, pero es bastante ingenioso. Tienes muchas opciones para lo que puedes hacer y realmente puedes personalizar la interacción a tu gusto.
Opciones de combinación
Si desea guardar algo de código, puede combinar algunas opciones, que es lo que tiendo a hacer. Por ejemplo al combinar la opción 1 y 3 solo debes preocuparte de administrar y animar la altura de la imagen.
El código no es mucho menor que la fuente de la opción 3, pero a medida que la IU crece en complejidad, puede ayudarlo un poco.
importar React, { Componente } de 'react'; importar { View, TextInput, Image, Animated, Keyboard, KeyboardAvoidingView } de 'react-native'; importar estilos, { IMAGE_HEIGHT, IMAGE_HEIGHT_SMALL } de './styles'; importar logotipo de './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(); este.keyboardWillHideSub.remove(); } KeyboardWillShow = (evento) => { Animated.timing(this.imageHeight, { duración: event.duration, toValue: IMAGE_HEIGHT_SMALL, }).start(); }; keyboardWillHide = (evento) => { Animated.timing(this.imageHeight, { duración: event.duration, toValue: IMAGE_HEIGHT, }).start(); }; render() { return ( ); }};exportar demostración predeterminada;
Cada implementación tiene sus pros y sus contras: deberá elegir la más adecuada según la experiencia de usuario que busca.
¿Está interesado en obtener más información sobre el uso de React Native para crear aplicaciones móviles de alta calidad?Regístrate en mi curso gratuito de React Native!
ANUNCIO
ANUNCIO
ANUNCIO
ANUNCIO
ANUNCIO
ANUNCIO
ANUNCIO
ANUNCIO
ANUNCIO
Si este artículo fue útil, .
Aprende a codificar gratis. El plan de estudios de código abierto de freeCodeCamp ha ayudado a más de 40 000 personas a conseguir trabajo como desarrolladores.Empezar
ANUNCIO
FAQs
¿Cómo se ejecuta React Native? ›
- Creando un proyecto de React Native en 2 minutos. ...
- 1.- Instala Node. ...
- - Instala Create React Native App vía npm. ...
- - Crea tu proyecto y dale un nombre a tu app. ...
- - Comprueba el directorio creado. ...
- 5.- Lanza tu proyecto. ...
- - Lanza tu aplicación en el simulador.
React (también llamada React. js o ReactJS) es una biblioteca Javascript de código abierto diseñada para crear interfaces de usuario con el objetivo de facilitar el desarrollo de aplicaciones en una sola página. Es mantenido por Facebook y la comunidad de software libre.
¿Cómo ejecuto la aplicación nativa de reacción en Chrome? ›Para usar DevTools de Chrome con React Native , primero asegúrese de estar conectado al mismo Wi-Fi, luego presione comando + R si está usando macOS, o Ctrl + M en Windows/Linux. Cuando aparezca el menú del desarrollador, elija Depurar Js de forma remota . Esto abrirá el depurador JS predeterminado.
¿Cómo hacer debug en React Native? ›Para configurar el debugger pulsamos en el icono del debugger en el lateral izquierdo de VSCode: Pulsamos en el icono de configuración (rueda dentada) y seleccionamos React Native. La opción React Native debe aparecerte al tener instalada la extensión.
¿Cómo empiezo a reaccionar nativo en Windows? ›Abra su carpeta de aplicaciones en VS Code. Instale el complemento React Native Tools para VS Code. Presione F5 o navegue hasta el menú de depuración (o presione Ctrl+Shift+D) y en el menú desplegable Depurar, seleccione "Depurar Windows" y presione la flecha verde para ejecutar la aplicación.
¿Qué lenguaje se usa en React? ›Lenguaje JSX
La sintaxis que usa React es el JavaScript XML (JSX), el cual es una combinación del lenguaje HTML y el JavaScript, por lo que también se considera una extensión.
React Native es un framework para la creación de aplicaciones móviles de código abierto creado por Facebook.
¿Qué lenguaje de programación utiliza React Native? ›React Native es un espacio de trabajo, conocido en inglés como framework. Se trata de una aplicación que trabaja con el lenguaje de programación JavaScript y funciona para construir aplicaciones móviles nativas para sistemas operativos como iOS y Android.
¿Puedo ejecutar reaccionar nativo en el navegador? ›¿Se puede usar React Native para web y dispositivos móviles? ¡Sí! Con React Native para Web, los desarrolladores pueden escribir una única aplicación React Native que se puede ejecutar de forma nativa en Android e iOS, así como en un navegador web que utiliza tecnologías web estándar .
¿Cómo abrir React en chrome? ›Para instalar las developer tools deben ir a chrome web store y buscar React Developer Tools o dar click aqui e instalarlas.
¿Se puede convertir el código de reacción para reaccionar nativo? ›
Ha creado una aplicación web React exitosa y ahora desea convertir esa aplicación web en aplicaciones móviles nativas en iOS/Android. Para hacerlo, tienes varias opciones. Primero, puede reconstruir su aplicación web desde cero para dispositivos móviles usando React Native . Otro método es convertirlo en una aplicación web progresiva o PWA.
¿Cómo inspecciono la aplicación nativa de reacción? ›reaccionar-depurador-nativo
chrome-devtools, que nos brinda la capacidad de depurar scripts y componentes. También podemos inspeccionar las solicitudes de red utilizando la pestaña "red" si la inspección de red está habilitada. Para habilitar la inspección de red, abra el menú contextual (haga clic con el botón derecho en el panel izquierdo) y seleccione "Habilitar inspección de red" .
Al igual que sucede con ReactJS, React Native permite a los ingenieros de software reutilizar bloques de construcción y aprovechar al máximo los componentes nativos, lo que hace que la codificación sea mucho más fácil y rápida.
¿Qué es mejor React o React Native? ›React JS se utiliza para crear la interfaz de usuario de las aplicaciones web (es decir, aplicaciones que se ejecutan en un navegador web) React Native se utiliza para crear aplicaciones que se ejecutan en dispositivos iOS y Android (es decir, aplicaciones móviles multiplataformas)
¿Cómo ejecutar un programa desde el inicio? ›- Pulsa las teclas Windows + R.
- Seguidamente tienes que escribir shell:startup.
- A continuación verás una ventana, en ella simplemente tienes que arrastrar los accesos directos de aquellos programas que deseas que se inicien automáticamente al arrancar Windows 10.
- Reinicia el equipo.
Para activar o desactivar el inicio rápido en Windows 10 y 11, lo único que tenemos que hacer es ir a Panel de control > Hardware y sonido > Opciones de energía > Cambiar las acciones de los botones de inicio/apagado. En este menú encontrarás la opción de inicio rápido, la cual debería estar activada por defecto.
¿Cómo dar prioridad a un programa en Windows? ›Con el administrador de tareas abierto, debemos ir a la pestaña «Detalles» y localizar el proceso del programa o juego al que queremos mejorar el rendimiento. Una vez localizado, pulsamos con el botón derecho del ratón sobre él, y en el menú «Establecer prioridad» tenemos las opciones para asignarle más prioridad.
¿Cómo cambio el icono de hacer clic en reaccionar? ›La respuesta para esto es: import React, { useState } from "react"; function HeaderIcon({ inactiveIcon, activeIcon }) { const [isActive, setIsActive] = useState(false); return ( <div onClick={() => setIsActive(! isActive)}> {isActive ?
¿Cómo poner iconos en React Native? ›Para agregar los íconos en Android los podemos generar directamente desde Android Studio. En la sidebar, hacer click derecho en la carpeta res dentro de app y luego en New > Image Asset.
¿Cómo agregar script en React? ›Agregar una nueva etiqueta de script y agregarla directamente al elemento <head> de la página es la forma más fácil de agregar etiquetas <script> en la aplicación React. react-helmet es una biblioteca de terceros que se puede usar para lograr lo mismo manejando la etiqueta <head> en cada página.
¿Es React nativo más difícil que reaccionar? ›
js usó un DOM virtual para representar el código del navegador en React, mientras que React Native usa la API nativa para representar componentes para aplicaciones móviles. React tiene una curva de aprendizaje pronunciada, ya que requiere conocimiento de bibliotecas, mientras que React Native es más fácil de entender con conocimientos básicos de React y JavaScript .
¿Es React nativo fácil de aprender? ›React Native proporciona un conjunto estándar de API para crear componentes de interfaz de usuario, lo que permite a los desarrolladores escribir código solo una vez y ejecutarlo en varias plataformas. React Native es muy fácil de aprender para alguien que viene del desarrollo web .
¿Qué tan difícil es aprender React? ›Una API sencilla, una potencia brutal: Aprender React es más fácil de lo que parece si ya tienes unas bases de programación y Javascript. Suele costar más el cambio de mentalidad (pasar de una programación imperativa a una declarativa) que aprender como usar su API. En el primer día ya estarás creando componentes.
¿Cuánto cuesta React Native? ›Es gratuito, de código abierto y tiene una gran comunidad que lo respalda. React Native es un proyecto respaldado por una gran comunidad de desarrolladores, y la plataforma anima a los desarrolladores a contribuir a mejorar el marco de trabajo.
¿Cómo saber si tengo React Native? ›Puedes verificar la versión de React visitando directamente el archivo package. json y ver la versión de la aplicación React en la sección de dependencias: {} como lo puedes ver en el ejemplo que pongo a continuación.
¿Es React nativo un idioma? ›React Native es un marco de JavaScript para escribir aplicaciones móviles reales y nativas para iOS y Android. Se basa en React, la biblioteca de JavaScript de Facebook para crear interfaces de usuario, pero en lugar de apuntar al navegador, apunta a plataformas móviles.
¿Qué hace reaccionar nativo? ›React Native (también conocido como RN) es un marco de aplicación móvil popular basado en JavaScript que le permite crear aplicaciones móviles renderizadas de forma nativa para iOS y Android . El marco le permite crear una aplicación para varias plataformas utilizando la misma base de código.
¿Cuánto gana un desarrollador en React Native? ›El salario react native developer promedio en Estados Unidos es de $125,000 al año o $60.10 por hora.
Cual es el mejor flutter o react native? ›Ambos marcos tienen ventajas y desventajas únicas que deben tenerse en cuenta al determinar. Sin embargo, si tuviéramos que elegir uno, diríamos que Flutter es un poco más fácil de aprender que React Native . Flutter usa Dart, un lenguaje relativamente fácil de aprender, mientras que React Native usa JavaScript, que puede ser un poco más complicado.
¿Cómo activar el Active Scripting? ›- Abra Chrome en su ordenador.
- Haga clic en. Configuración.
- Seleccione Seguridad y privacidad.
- Haga clic en Configuración de sitios.
- Haga clic en JavaScript.
- Seleccione Los sitios pueden usar JavaScript.
¿Cómo activar un navegador como principal? ›
- En tu dispositivo Android, abre Ajustes .
- Toca Aplicaciones.
- En "General", toca Aplicaciones predeterminadas.
- Toca Aplicación de navegador Chrome .
Activar JavaScript en Google Chrome
Haga clic en Configuración de sitios. Haga clic en JavaScript. Seleccione Los sitios pueden usar JavaScript.
Chrome DevTools es un conjunto de herramientas para desarrolladores web integrado en el navegador Google Chrome. Con estas herramientas puede inspeccionar el HTML renderizado (DOM) y la actividad de red de sus páginas. Puede utilizar DevTools para solucionar problemas relacionados con el servicio de anuncios.
¿Cómo accedo a reaccionar Devtools? ›Para abrir React Developer Tools, primero abra Chrome DevTools ( Ver > Desarrollador > Herramientas de desarrollador) . En el mismo banner que Elementos, Fuentes, Consola, etc., habrá dos nuevas pestañas de React: Componentes y Perfilador. Estas dos pestañas solo aparecerán en sitios que usen React.
¿Cómo se compila React? ›- Conéctese a la cuenta de servicio del repositorio (GitHub, Bitbucket, VSTS, Azure DevOps).
- Seleccione un repositorio y una rama donde reside la aplicación.
- Elija el proyecto package. json que desea compilar.
- Configure la primera compilación.
React y React Native ayudan a acercar el desarrollo web y móvil para mejorar las experiencias de los usuarios y los desarrolladores . Algunos equipos van tan lejos como para construir un sistema de diseño multiplataforma completo con React y React Native (tutorial de video).
¿Qué es el código nativo? ›El código nativo es una forma de código de la programación de computadora que se configura para funcionar con el uso de un procesador especificado. La estructura exacta del código nativo se usa para responder a las instrucciones que son publicadas por el procesador.
¿Qué reactivo detiene la reacción? ›El reactivo que se consume en primer lugar es llamado reactivo limitante, ya que la cantidad de éste determina la cantidad total del producto formado. Cuando este reactivo se consume, la reacción se detiene.
¿Cómo sé si una aplicación está instalada en reaccionar nativo? ›Puede recuperar la lista de nombres de aplicaciones compatibles llamando a AppInstalledChecker. getAppList() o verifique la lista de aplicaciones. js . Si su aplicación no está en la lista, deberá averiguar el esquema de URL o el nombre del paquete y usar isAppInstalledIOS(url) o isAppInstalledAndroid(packakge-name) .
¿Cómo detectar una aplicación nativa y una híbrida? ›A diferencia de las nativas, las apps híbridas se adaptan a cualquier plataforma porque están desarrolladas con un patrón de diseño responsive. Es decir, se desarrolla la aplicación web y esta se adapta a cualquier dispositivo, sin importar tamaño o resolución del mismo.
¿Cómo funciona broma en reaccionar nativo? ›
El ajuste preestablecido de Jest integrado en react-native viene con algunas simulaciones predeterminadas que se aplican en un repositorio de react-native . Sin embargo, algunos componentes nativos de reacción o componentes de terceros se basan en el código nativo para su representación. En tales casos, el sistema de simulación manual de Jest puede ayudar a simular la implementación subyacente.
¿Cuánto se tarda en aprender React Native? ›Depende de tu nivel como informático y hasta donde quieras llegar. Todo lo que mencionas podría ser aprendido en un mínimo de 4 horas hasta unas 20 cada uno (nivel junior te guste o no ya después iras mejorando).
¿Que necesito instalar para React Native? ›Para instalar React Native, necesitamos node, ya que implementaremos sentencias npm para gestionar los paquetes de nuestro proyecto. Una manera efectiva de instalar node es a través de Homebrew.
¿Que estudiar antes de React? ›Qué Aprender Antes de React
HTML y CSS: Aprender HTML y el CSS es muy recomendado para aprender React, ya que sus aplicaciones son escritas típicamente en HTML y CSS.
React Native usa el mismo paradigma fundamental de construcción de bloques de UI (componentes visuales con los que interacciona el usuario) que las aplicaciones nativas reales de Android e iOS, pero gestiona la interacción entre los mismos utilizando las capacidades de JavaScript y React.
¿Puedo hacer aplicaciones con reaccionar? ›Como resultado, React se ha vuelto enormemente popular entre los desarrolladores de todo el mundo. Admite el diseño receptivo para todos los dispositivos modernos, incluidos teléfonos inteligentes, computadoras portátiles y de escritorio. Por lo tanto, puede crear su aplicación móvil utilizando React JS .
¿React native se ejecuta en el nodo? ›Necesitará Node, la interfaz de línea de comandos de React Native, un JDK y Android Studio . Si bien puede usar cualquier editor de su elección para desarrollar su aplicación, deberá instalar Android Studio para configurar las herramientas necesarias para crear su aplicación React Native para Android.
¿Cómo iniciar mi proyecto React? ›- En una terminal (y en el directorio de su preferencia) ejecutar: npm install -g create-react-app . ...
- Para verificar que el paquete ha sido instalado con éxito, ejecutar en la consola: create-react-app y esperar un mensaje de instalación satisfactoria.
- Crear una aplicación de React Native desde cero. ...
- Quitar los ficheros css de todos los archivos. ...
- Convertir los componentes de React en los componentes de React Native. ...
- Crear los estilos para componentes. ...
- Cambiar las librerías de navegación a las de React Native.
Algunas personas asumen erróneamente que se requiere Node para usar React. no lo es No necesita Node para ejecutar un proyecto React. Ni siquiera necesitas un navegador.
¿Qué es NPM en React Native? ›
npm (node package manager) es el gestor de dependencias/paquetes que obtienes por defecto cuando instalas Node. js. Proporciona una manera para que los desarrolladores instalen paquetes tanto a nivel global como local. A veces puede que quieras echar un vistazo a un paquete específico y probar algunos comandos.
¿Cómo ver si tengo React? ›Pimero dirigete a tu archivo “package. json” y en “Dependencies” o “DevDependencies”, depende de como hallas instalado React, te aparecera React y su version.
¿Cómo abrir React en el navegador? ›La forma más simple y rápida de integrar React en tu sitio web es importar la librería usando la etiqueta <script> , tal como se describe en la guía para Agregar React en 1 minuto de la documentación oficial de React.
¿Cómo compilar un proyecto de React? ›- Conéctese a la cuenta de servicio del repositorio (GitHub, Bitbucket, VSTS, Azure DevOps).
- Seleccione un repositorio y una rama donde reside la aplicación.
- Elija el proyecto package. json que desea compilar.
- Configure la primera compilación.
Las aplicaciones de React Native se comunican con el SDK de vídeo de Zoom a través del puente de React Native, principalmente mediante la instancia de SDK de vídeo de Zoom.
¿Cuánto gana un programador de React Native? ›El sueldo nacional promedio de un React Native Developer es de MXN$36,073 en México.