Añadir un loader en React Native

Tiempo de lectura: 2 minutos Os voy a enseñar cómo añadir un loader para las pantallas de carga de React Native. Para comenzar, hay que crear un nuevo componente que llamaremos Loader.js Ahora voy a explicar el código: Para crear el loader he utilizado la librería react-native-paper (https://reactnativepaper.com/), esta librería proporciona diseño basado en Material Design de Google. Si queremos … Leer más

Abrir Stack.Tab desde un Stack.Screen contenido dentro de un tab con diferentes NavitagionContainer React Native.

Tiempo de lectura: 3 minutos Os voy a explicar cómo abrir otro tab, dentro de un screen (fuera del tab pero contenido dentro de la pila de ejecución) que ya tenemos contenido en nuestro tab. Por ejemplo, tenemos la siguiente pantalla y queremos realizar la navegación qué se indica en el vídeo: Y queremos abrir el tab «Buscar» utilizando el … Leer más

Añadir iconos en Tab Navigator en React Native

Añadir iconos en Tab Navigator en React Native

Tiempo de lectura: < 1 minuto Cuando creamos un Tab Navigator por defecto, este sale sin iconos: Partiendo de este código: Si queremos añadir iconos podemos hacer lo siguiente. Vamos a utilizar una librería que ya nos proporciona iconos a nuestro proyecto, también podemos utilizar nuestros propios iconos, pero para que sea más rápido vamos a utilizar esta librería. Instalamos la … Leer más

Solucionar error ‘Too many re-renders. React limits the number of renders to prevent an infinite loop.’ en React

Solucionar error ‘Too many re-renders. React limits the number of renders to prevent an infinite loop.’ en React

Tiempo de lectura: < 1 minuto Este error ocurre cuándo llamamos por ejemplo a un setEstado desde varios elementos a la vez. Tomando de ejemplo el siguiente código: Los tres botones tienen asignados el método onPress con la función de setPosicion que va a cambiar la posición de la variable posMenu. El problema viene en que cuando el render se devuelve … Leer más

Solucionar Warning: Each child in a list should have a unique «key» prop. Al hacer un bucle de elementos dinámicos con React Native.

Solucionar Warning: Each child in a list should have a unique «key» prop. Al hacer un bucle de elementos dinámicos con React Native.

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

Generar una vista (View) usando un bucle con React Native. Ejemplo menú dinámico.

Generar una vista (View) usando un bucle con React Native. Ejemplo menú dinámico.

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

Solucionar error en PHPMyadmin de ‘count(): Parameter must be an array or an object that implements Countable’

Solucionar error en PHPMyadmin de ‘count(): Parameter must be an array or an object that implements Countable’

Tiempo de lectura: < 1 minuto Si al usar PHPMyadmin o al terminar de instalar esta extensión aparece el siguiente error: Lo primero que tenemos que hacer es editar el archivo de PHPMyadmin Tenemos que ir a la línea 613 y localizar el siguiente código: Para solucionar el error tenemos que añadir paréntesis de la siguiente forma: Y ahora solo tendremos … Leer más

Acceso a los datos de un fichero XML mediante AJAX y DOM en JavaScript

Acceso a los datos de un fichero XML mediante AJAX y DOM en JavaScript

Tiempo de lectura: 2 minutos Buenas tardes a todos, Seguimos con los tutoriales de JavaScript. Hoy os voy a enseñar a hacer un AJAX en JavaScript, para acceder a los datos de un fichero XML. ¿Primero os preguntareis que es un AJAX? De forma rápida, clara y concisa, es una técnica en el desarrollo web que permite, leer los datos … Leer más

Añadir Top Tap Navigation usando React Native

Añadir Top Tap Navigation usando React Native

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

Abrir tab o screen dentro de otro NavigationContainer React Native

Abrir tab o screen dentro de otro NavigationContainer React Native

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