Ajustar WebView width: 100% en React Native

Ajustar WebView width: 100% en React Native

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

Solucionar problema Expo no ejecuta React Native en móvil o tablet Android

Solucionar problema Expo no ejecuta React Native en móvil o tablet Android

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

Pasar parámetros a un Screen o pantalla en React Native

Pasar parámetros a un Screen o pantalla en React Native

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

Navegar entre pantallas (screens) con React Native

Navegar entre pantallas (screens) con React Native

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

Borrar todos los packetes o plugins (dependencias) de npm en React o React Native

Borrar todos los packetes o plugins (dependencias) de npm en React o React Native

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

Solucionar conflicto con paquete npm install

Solucionar conflicto con paquete npm install

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

Crear una pantalla (Screen) con React Native

Crear una pantalla (Screen) con React Native

Tiempo de lectura: 2 minutos Las pantallas en React Native funcionan como propios objetos que se construyen con distintos componentes. En este ejemplo voy a enseñaros cómo crear un Screen. Primero creamos una carpeta screens dónde vamos a meter las pantallas y dentro de esta carpeta creamos un archivo .js llamado Login.js. Dentro del archivo Login.js vamos a tener lo … Leer más

Cambiar el texto de un Text en React Native

Cambiar el texto de un Text en React Native

Tiempo de lectura: < 1 minuto Si queremos cambiar el contenido de un Text utilizando React Native (hacer un setText) podemos utilizar el siguiente código que voy a explicar. Ahora voy a explicar el código. Primero se crea una constante de estados, primero indica el parámetro con el texto (texto) y el segundo atributo (setText) es la función para cambiar el … Leer más

Realizar una llamada GET desde React Native

Realizar una llamada GET desde React Native

Tiempo de lectura: < 1 minuto Sí queremos obtener datos desde un servidor remoto, podemos utilizar el siguiente código: Primero se crean los headers que podamos utilizar: Después las opciones de la petición: En este caso indicamos que es un GET y que tiene los headers creados antes. Y ahora lanzamos la petición: Se indica la URL dónde está el recurso … Leer más

Crear un componente en React Native

Crear un componente en React Native

Tiempo de lectura: 3 minutos React Native funciona con componentes, ¿Qué quiere decir esto? Pues que cada elemento representa un objeto con su vista, propiedades y métodos. Un objeto es una caja negra, dónde tú introduces una entrada y devuelve una salida, independientemente de lo que contenga o no. Os voy a explicar cómo crear un componente de ejemplo en … Leer más