Tiempo de lectura: < 1 minuto Si al ejecutar nuestro código dónde incluimos un bucle de elementos, aparece el siguiente mensaje: «Warning: Each child in a list should have a unique «key» prop» Esto se debe a que nuestro bucle está creando elementos iguales o clones con el mismo ID. Imaginemos qué este es nuestro código: Al ejecutarlo nos aparece el … Leer más
Tiempo de lectura: 2 minutos Podemos crear una lista de elementos y asignarlos a la vista para que devuelva por ejemplo un menú con X pestañas. De esta manera podemos crear un render que tenga una lista y se recorra con un map para devolver cada uno de sus elementos. Lo primero que tenemos que hacer es crear el componente … Leer más
Tiempo de lectura: < 1 minuto Si queremos añadir un TopTapNavigation usando React Native para que el resultado quede como en esta imagen: Primero tenemos que instalar la dependencia necesaria (recuerda instalar antes React-Navigation): Una vez instalada se utiliza de la misma forma que un BottomTapNavigation: Ahora creamos la instancia para los Tabs Ahora añadimos el árbol de navegación y el … Leer más
Tiempo de lectura: < 1 minuto Si al abrir un tab o pantalla dentro de un NavigationContainer devuelve este error: Es porque tenemos dos NavigationContainer anidados y React no sabe cuál tiene que abrir. Para solucionarlo solo tendremos que añadir la siguiente propiedad dentro de nuestro <NavigationContainer Quedando de la siguiente forma: isMa Ingeniero en Informática, Investigador, me encanta crear cosas … Leer más
Tiempo de lectura: < 1 minuto El plugin react-native-webview tiene un issue que no permite adaptar a pantalla al 100% mediante style. En este caso lo hemos instalado usando Expo. Hay que recordar también qué este plugin solo funciona en Android o iOS y no en Web. Por eso sí ponemos el style: Al ejecutarlo en un terminal no mostrará la … Leer más
Tiempo de lectura: < 1 minuto Si al intentar cargar la aplicación en nuestro dispositivo Android mediante QR o cable se queda en bucle infinito cargando tenemos que abrir la aplicación crenado un Tunnel. Para ello introducimos el siguiente comando Esto nos creará un tunel entre el dispositivo y el PC para poder ejecutar la aplicación directamente. isMa Ingeniero en Informática, … Leer más
Tiempo de lectura: < 1 minuto Si queremos pasar parámetros entre pantallas con React Native tenemos que hacer lo siguiente. Primero en la pantalla dónde hemos creado el NavigationContainer (puede ser un Tab Navigator o Stack Navigation). Buscamos el Screen al que queremos pasar parámetros y añadimos lo siguiente: Y para recogerlo en la pantalla en este caso Perfil.js. Tendremos que … Leer más
Tiempo de lectura: 3 minutos En React Native cada pantalla es un objeto apilable que se va añadiendo en la parte superior de la pila. Es decir, que si abrimos una pantalla y luego la cerramos, la pantalla que aparece es la pantalla que teníamos abierta anteriormente. Para poder manejar pantallas vamos a utilizar el plugin de react-navigation (https://reactnative.dev/docs/navigation). Primero … Leer más
Tiempo de lectura: < 1 minuto Si queremos borrar las dependencias instaladas a nivel de proyecto (no global) dentro de nuestro proyecto de React tenemos que hacer lo siguiente: Borrar la carpeta llamada node_modules.rm node_modules Borrar package-lock.json:rm package-lock.json Ahora si queremos reinstalar de nuevo las dependencias tendremos que ejecutar Y de esta forma podemos restaurar las dependencias de nuestro proyecto. isMa … Leer más
Tiempo de lectura: < 1 minuto Si al instalar un paquete nos sale un texto de error como este: npm WARN config global –global, –local are deprecated. Use –location=global instead.npm ERR! code ERESOLVEnpm ERR! ERESOLVE could not resolvenpm ERR!npm ERR! While resolving: @react-navigation/stack@6.2.2npm ERR! Found: @react-navigation/native@5.9.8npm ERR! node_modules/@react-navigation/nativenpm ERR! @react-navigation/native@»^5.9.8″ from the root projectnpm ERR!npm ERR! Could not resolve dependency:npm ERR! … Leer más
