Tutorial de React Native: creación de su primera aplicación para iOS con JavaScript (Parte 1)

 

 

 

  • Diseño de arquitectura de componentes de interfaz de usuario y tokens, con Nathan Curtis

  • Índice
    1. Lecturas adicionales sobre SmashingMag:
    2. Lo que estaremos construyendo
    3. Comidas para llevar
    4. 1. Configuración de un proyecto nativo de React en blanco
    5. 2. Obteniendo datos de fondos de pantalla desde la API
      1. Cambiar a la sintaxis de clase ES2015
    6. 3. Agregar una pantalla de carga
    7. 4. Filtrar y seleccionar fondos de pantalla aleatorios

    Sin embargo , estos marcos y la idea general de crear aplicaciones móviles con JavaScript nunca me atrajeron. Siempre pensé, ¿por qué no aprender Swift/Objective-C o Java y crear aplicaciones reales? Eso definitivamente requiere una cantidad significativa de aprendizaje, pero ¿no es eso lo que hacemos los desarrolladores y en lo que deberíamos ser buenos? ¿Aprender rápidamente nuevos lenguajes y marcos? ¿Cuál es el punto entonces? Para mí las ventajas nunca superaron las dudas.

     

    La idea de crear aplicaciones móviles con JavaScript no es nueva. Hemos visto marcos como Ionic y PhoneGap asumir el desafío y, hasta cierto punto, lograr obtener una buena cantidad de apoyo de los desarrolladores y la comunidad. A la parte 2 del tutorial.

    Sin embargo , estos marcos y la idea general de crear aplicaciones móviles con JavaScript nunca me atrajeron. Siempre pensé, ¿por qué no aprender Swift/Objective-C o Java y crear aplicaciones reales? Eso definitivamente requiere una cantidad significativa de aprendizaje, pero ¿no es eso lo que hacemos los desarrolladores y en lo que deberíamos ser buenos? ¿Aprender rápidamente nuevos lenguajes y marcos? ¿Cuál es el punto entonces? Para mí las ventajas nunca superaron las dudas.

    Hasta que leí este artículo de Chalk + Chisel , la siguiente línea en particular:

    Un par de meses después, tengo la confianza suficiente para decir que es posible que nunca vuelva a escribir una aplicación para iOS en Objective-C o Swift.

    ¿Qué? ¿Hablas como... en serio?

    Lecturas adicionales sobre SmashingMag:

    • Por qué debería considerar React Native para su aplicación móvil
    • Representación del lado del servidor con React, Node y Express
    • Cómo escalar las aplicaciones de React
    • Internacionalización de aplicaciones React

    Leer una afirmación tan audaz me hizo seguir adelante y darle una oportunidad a React Native. ¿Por qué no? Ya estaba usando React y me encantaba. React Native es tan similar a React (¡obvio!) que te sentirás como en casa si ya eres desarrollador de React. Incluso si no lo eres, afortunadamente React resulta ser muy fácil de entender.

    Lo que estaremos construyendo

    Nunca tuve suerte de encontrar la aplicación de fondo de pantalla perfecta para mi iPhone en la App Store. En el escritorio, Unsplash es la ventanilla única para todas mis necesidades de papel tapiz. En el teléfono: Configuración → Fondo de pantalla 🙁

    Entonces, a diferencia de otros tutoriales en los que construyes contadores y apenas los usas, en este tutorial, juntos crearemos una aplicación que extraerá impresionantes fondos de pantalla aleatorios de Unsplash, los mostrará de una manera estéticamente agradable y te permitirá guardar fondos de pantalla. de su elección al Camera Roll. Créame, me he encontrado usando esta aplicación más de lo que pensaba inicialmente. Incluso si al final de este tutorial React Native no logra impresionarte, terminarás teniendo una aplicación de fondo de pantalla realmente genial. ¿No es genial?

    Antes de comenzar, aquí hay algunas cosas con las que debes estar familiarizado:

    1. javascript
    2. Algunas características de ES2015 , a saber, clases , funciones de flecha , desestructuración y cadenas de plantilla
    3. Terminal MacOS X
    4. CSS (¡sí!)
    5. Reaccionar (opcional)

    Una cosa más. Como lo indica claramente el título, en este tutorial crearemos una aplicación para iOS . Lo que requiere, sí, incluso con React Native, que estés en una Mac. Con React Native definitivamente puedes crear aplicaciones de Android en Windows y Linux , pero no en iOS. Por lo tanto, de ahora en adelante, este tutorial asume que estás ejecutando Mac OS X.

    Comidas para llevar

    Al final de este tutorial, estará lo suficientemente familiarizado con React Native como para comenzar a escribir sus propias aplicaciones de inmediato. Repasaremos la configuración de un proyecto en Xcode, la instalación de módulos y componentes de terceros, la vinculación de bibliotecas, el diseño con flexbox, la creación de un detector de gestos personalizado y muchas otras cosas.

    Si no ha usado React antes, este tutorial también lo configurará con React. React es la nueva biblioteca JS con mucho potencial y no veo que vaya a ninguna parte en el futuro cercano.

    Este tutorial se ha dividido en dos partes para su comodidad. Cada parte tiene cinco secciones. En cada sección logramos un objetivo que nos acerca un paso más a terminar nuestra aplicación. Te aconsejo que una vez comenzado termines toda esa sección de una sola vez ya que son cortas, y de esa manera conocerás todo el concepto que estoy tratando de presentar sin interrumpir tu flujo.

     

    Para su referencia, el código final de la aplicación que estamos creando se puede encontrar en este repositorio de GitHub .

    1. Configuración de un proyecto nativo de React en blanco

    Asegúrese de tener instalado Xcode 7.0 o superior. se puede descargar gratis desde la App Store.

    Lo más probable es que (si eres desarrollador web y lees esto en 2016) ya tengas instalado Node. Pero si ese no es el caso, continúa e instala Node también. Otra herramienta importante que necesitaremos es npm . El nodo viene con npm instalado; Sin embargo, necesitarás actualizarlo, ya que se actualiza con bastante frecuencia. Siga esta guía de instalación .

    Eso es todo lo que necesitaremos. Ahora, desde la terminal ejecuta npm install -g react-native-cli. Esto instalará React Native globalmente en su sistema.

    Si todo te parece demasiado nuevo, o simplemente te sientes un poco perdido durante todo el proceso de instalación, la guía oficial de introducción siempre está ahí para ayudarte.

    Encuentre una buena ubicación en su computadora donde le gustaría configurar el proyecto. Una vez allí, desde la terminal ejecuta react-native init SplashWalls.

    Esto debería buscar e instalar todos los módulos necesarios y crear una nueva carpeta llamada SplashWalls .

    Una gran ventaja de React Native es que puedes escribir aplicaciones de Android e iOS junto con la mayoría del código JavaScript compartido entre ellas. Dentro de la carpeta recién creada encontrará dos archivos .js : index.android.js e index.ios.js ; los nombres se explican por sí mismos. Si está creando una aplicación para iOS, trabajará con index.ios.js ; con index.android.js para una aplicación de Android; y ambos para, ya sabes, ambas plataformas.

    Dado que estamos creando una aplicación para iOS, por el bien de este tutorial y para mantener las cosas limpias, nos desharemos de index.android.js y de la carpeta android por completo. index.ios.js es el archivo con el que trabajaremos. Este es el archivo que se ejecuta por primera vez cuando se inicia la aplicación.

    A continuación, dirígete a la carpeta ios y ejecuta SplashWalls.xcodeproj .

    Deberías ver una ventana emergente de Xcode como la que se muestra a continuación.

    Observe la advertencia en la imagen de arriba que dice "No se encontraron perfiles de aprovisionamiento coincidentes". Arreglemos esto.

    Primero, cambie el texto en el campo Identificador de paquete a algo personalizado. Debe asegurarse de que todo lo que ingrese siga la convención DNS inversa , en la que el nombre de dominio de su organización se invierte y se le agregan más identificadores como sufijo. Esta convención ayuda a distinguir su aplicación de otras en un dispositivo y en la App Store. Usaré com.nashvail.me.tutorial.SplashWalls ; simplemente sustituye tu nombre por el mío si parece que no puedes inventar nada.

    A continuación, elija su nombre en el menú desplegable del equipo.

    Haga clic en Solucionar problema .

    Mientras estamos en eso, observe la sección Información de implementación . Tiene algunas configuraciones predeterminadas aplicadas.

     

    Cambie la configuración para que coincida con lo siguiente:

    Haremos que la aplicación sea solo vertical y también ocultaremos la barra de estado.

    Continúe y presione el botón Ejecutar en la parte superior izquierda de Xcode. Al hacerlo, se abrirá una ventana de terminal como la que se muestra a continuación. La transformación inicial lleva un poco de tiempo.

    Una vez hecho esto, debería ver el siguiente resultado en el simulador:

    Y con esto hemos completado nuestra primera sección.

    2. Obteniendo datos de fondos de pantalla desde la API

    En esta sección realizaremos llamadas a la API de Unsplash.it solicitando datos del fondo de pantalla. Pero antes de comenzar a hacer todo el trabajo interesante, es necesario realizar algunos ajustes.

    Cambiar a la sintaxis de clase ES2015

    Al abrir el archivo index.ios.js , notará que ya hay un código inicial presente. Este es el código responsable de la salida en el simulador (imagen anterior).

    Dentro de index.ios.js observe la línea de código que dice var SplashWalls = React.createClass({ … }). Vamos a modificar esto. Usaremos classla sintaxis de ES2015 para este tutorial.

    Los desarrolladores somos almas curiosas. Sé que debes estar preguntando: ¿Por qué? ¿ Por qué cambiar a la classsintaxis?

    Todo depende del gusto de cada quien. He programado extensamente en lenguajes orientados a objetos antes y classme resulta más familiar. Además, al usar classtambién eliges mantener el código un poco más limpio ya que no tienes que agregar comas después de cada declaración de método.

    Por otro lado, cuando eliges classno obtienes funciones como el enlace automático o el acceso al isMountedmétodo, lo cual no es nada malo, ya que realmente no te encontrarás perdido si no los usas.

    Cualquiera que sea el camino que elijas, después de todo, estarás creando una clase. Mi consejo sería utilizar class. Es una característica nueva y tarde o temprano te encontrarás usando ES2015. Y si estás siguiendo este tutorial, tendrás que usarlo class: ¡realmente no tienes otra opción!

    Para obtener más información sobre esto, considere leer " React.Component vs React.createClass " de Naman Goel y Zach Silveira.

    Una vez que haya realizado los cambios necesarios, el bloque de código ahora debería verse como se muestra:

    class SplashWalls extends Component{ render() { return ( . View style={styles.container} Text style={styles.welcome} Welcome to React Native! /Text Text style={styles.instructions} To get started, edit index.ios.js /Text Text style={styles.instructions} Press Cmd+R to reload,{'n'} Cmd+D or shake for dev menu /Text ./View ); }};

    Para las personas nuevas en React, el código dentro de returnlos pares puede parecer un poco extraño, pero no es ciencia espacial, solo una buena sintaxis similar a XML llamada JSX. Lea más sobre esto aquí .

    En comparación con la classimplementación previa, la varsintaxis ha desaparecido. También render: function(){…ahora es solo render(){….

     

    ¡Ey! ¿Pero qué es eso que Componentestás extendiendo? Y harías bien en preguntar. Si ejecuta el proyecto en Xcode ahora, recibirá un error que indicará Componentque no está definido. Puedes hacer dos cosas aquí: reemplazar Componentcon React.Component; o agregue una nueva línea dentro del bloque (que se muestra a continuación) en la parte superior del archivo.

    En este y en ejemplos de código posteriores, rodeo las líneas recién agregadas con para que le resulte más fácil comparar el código que está escribiendo con lo que se muestra aquí. Solo asegúrese de que si copia el código de las muestras no termine copiándolo junto con el código real. Dado que JSX no admite comentarios, terminará bloqueando la aplicación si los incluye en su código JSX./////***/

    var { AppRegistry, StyleSheet, Tex .t, View, /***/ Component /***/} = React;

    Todo lo que hace el bloque de código anterior es ahorrarle un par de pulsaciones de teclas. Por ejemplo, si no incluyeras estas líneas de código en la parte superior, tendrías que escribirlas React.AppRegistryen lugar de AppRegistryhacerlo cada vez que quisieras hacerlo. ¡Muy genial! ¿No es así? Vale, no tanto.

    Vuelve a Xcode y ejecuta el proyecto una vez más para asegurarte de no haber roto nada en el proceso.

    ¿Todo bien? ¡Excelente! Vamonos.

    Dentro de la SplashWallsclase, lo primero que debemos hacer es agregar un constructor. Dentro del constructor inicializaremos nuestras variables de estado. Las únicas dos variables de estado que necesitaremos en este punto son una matriz, wallsJSONque almacenará todos los datos JSON obtenidos de la API, y isLoadingque es una variable booleana, lo que significa que contendrá un valor verdadero o falso. Tener esta variable de estado nos ayudará a mostrar y ocultar la pantalla de carga dependiendo de si se han cargado los datos o no.

    Dentro de la SplashWallsclase, agregue constructorcomo se muestra a continuación.

    class SplashWalls extends Component{/***/ constructor(props) { super(props); this.state = { wallsJSON: [], isLoading: true }; }/***/...}

    A continuación, definiremos un método fetchWallsJSON , que, bueno, hace lo que dice. Deje un par de líneas debajo de la llave de cierre del constructor y agregue las siguientes líneas de código:

    fetchWallsJSON() { console.log(‘Wallpapers will be fetched’);}

    Nos gustaría que esta función se active una vez que nuestro componente se haya montado correctamente. Añade el componentDidMountmétodo. La mayoría de los métodos descritos van dentro de la SplashWallsclase; no olvidaré mencionar cuando no lo hacen. Nails Trends

    componentDidMountes un método de ciclo de vida que se activa inmediatamente después de que se produce la primera renderización.

    Aquí hay una buena explicación de todos los métodos del ciclo de vida del componente React . Solo recuerda que como estamos usando la classsintaxis más nueva, podemos omitir el getInitialStatemétodo. Se sustituye por una this.statedeclaración de variable en el archivo constructor.

     

    Es una buena idea organizar los métodos dentro de tu clase de forma limpia. Me gusta mantener todos los métodos personalizados separados de los métodos del ciclo de vida. Tu también deberías.

    Declaremos componentDidMount:

    componentDidMount() { this.fetchWallsJSON();}

    Observe que dentro del fetchWallsJSONmétodo hemos registrado un mensaje en la consola, pero ¿dónde está la consola? Agárrate fuerte.

    Asegúrate de tener seleccionada la ventana del Simulador y presiona Cmd + Control + Z. En el menú que aparece, seleccione Depurar en Chrome . Esto abre una nueva pestaña. Mientras esté en la misma pestaña, diríjase a Herramientas de desarrollo ( Option + Cmd + J). En la consola encontrarás el mensaje "Se recuperarán los fondos de pantalla".

    Mantenga el depurador abierto por ahora. Visita unsplash.it/list en una nueva pestaña. Debería ver toda la ventana gráfica llena con una matriz JSON. Cada elemento de la matriz es un objeto JavaScript que contiene datos para un único fondo de pantalla. Estos son los datos que filtraremos y tomaremos fondos de pantalla aleatorios.

    Primero hagamos fetchWallsJSONalgo más que simplemente registrar un mensaje en la consola.

     fetchWallsJSON() { /***/ var url = 'https://unsplash.it/list'; fetch(url) .then( response = response.json() ) .then( jsonData = { console.log(jsonData); }) .catch( error = console.log(‘Fetch error ‘ + error) ); /***/ }

    Actualice el simulador ( Cmd + R) o, mejor aún, habilite la recarga en vivo presionando Cmd + Ctrl + Zy eligiendo Habilitar recarga en vivo . Al habilitar la recarga en vivo, no es necesario que actualice el simulador cada vez que realiza un cambio en su código. Simplemente guárdelo en el IDE y el simulador se actualizará automáticamente. Si alguna vez ha desarrollado una aplicación en Xcode o Android Studio, esta característica le resultará particularmente sorprendente, ya que no tiene que presionar el botón Ejecutar y volver a compilar la aplicación cada vez que realiza un cambio. Estos pequeños detalles hacen que React Native sea mucho más atractivo.

    Al actualizar, después de esperar unos segundos, debería ver el siguiente resultado en la consola:

    Bien, ahora podemos recuperar los datos JSON de los fondos de pantalla de la API. Como habrás notado, hay un pequeño retraso antes de que los datos se registren en la consola. Esto se debe a que en segundo plano los datos se descargan de los servidores, lo que lleva tiempo.

    Este parece un momento perfecto para agregar una pantalla de carga.

    3. Agregar una pantalla de carga

    Al final de esta sección, aparecerá una pantalla de carga mientras se descargan los datos JSON.

    Primero, elimine todo lo que hay dentro del método SplashWallde la clase rendery agregue estas líneas de código:

     render() { var {isLoading} = this.state; if(isLoading) return this.renderLoadingMessage(); else return this.renderResults(); }

    Tenemos dos nuevos métodos. Declarémoslos también, ya que estamos en ello.

     

     renderLoadingMessage() { return ( . View style={styles.loadingContainer} ActivityIndicatorIOS animating={true} color={'#fff'} size={'small'} style={{margin: 15}} / Text style={{color: '#fff'}}Contacting Unsplash/Text ./View ); } renderResults() { return ( . View Text Data loaded /Text ./View ); }

    Dependiendo del valor que isLoadingtenga la variable de estado, Viewse representarán dos componentes diferentes. Si isLoadinges cierto, mostramos una rueda de carga seguida del texto "Contactar con Unsplash"; cuando isLoadinges falso (lo que implica que se han cargado datos), mostramos los resultados, que a partir de ahora es solo un Textcomponente que dice "Datos cargados".

    Pero nos falta algo aquí: no cambiaremos el valor de isLoadinguna vez que se hayan descargado nuestros datos. Hagamos precisamente eso. Dirígete al fetchWallsJSONmétodo y debajo de la línea que inicia sesión jsonDataen la consola, agrega una línea adicional para actualizar isLoading.

     fetchWallsJSON() { var url = 'https://unsplash.it/list'; fetch(url) .then( response = response.json() ) .then( jsonData = { console.log(jsonData); /***/ this.setState({isLoading: false}); //update isLoading /***/ }) .catch( error = console.log(‘Fetch error ‘ + error) ); }

    setState es uno de los métodos de API de componentes de React. Es el método principal utilizado para activar actualizaciones de la interfaz de usuario.

    Observe que renderLoadingMessagetenemos un nuevo componente: ActivityIndicatorIOS(en pocas palabras, la ruleta). Necesitamos importar este componente antes de poder usarlo. ¿ Recuerdas cuando importamosComponent donde guardamos un par de pulsaciones de teclas? Tendremos que hacer precisamente eso.

    var { AppRegistry, StyleSheet, Tex .t, View, Component,/***/ ActivityIndicatorIOS // Add new component/***/} = React;

    Necesitamos hacer una cosa más antes de que podamos ver los resultados. Observe que el Viewcontenedor ActivityIndicatorIOStiene el estilo establecido en styles.loadingContainer. Tendremos que definir eso. Encuentra la línea que dice var styles = StyleSheet.create({…. Aquí verás que hay algunos estilos ya definidos. Estos estilos son responsables de diseñar el mensaje inicial "Bienvenido a React Native" en el simulador. Deshágase de todos los estilos predefinidos y agregue solo uno loadingContainercomo se muestra.

    var styles = StyleSheet.create({/***/ loadingContainer: { flex: 1, flexDirection: 'row’, justifyContent: 'center', alignItems: 'center', backgroundColor: '#000' }/***/});

    Todos los estilos que aplica a los componentes en React Native se declaran de la manera que se muestra arriba. StyleSheet.createtoma un objeto JavaScript que contiene estilos como argumento y luego se puede acceder a los estilos mediante el dot[.]operador. Como aplicamos el estilo al contenedor Viewde la siguiente manera.

     

    View style={styles.loadingContainer}/

    También puedes declarar estilos en línea:

    View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#000' }} /

    Sin embargo, esto hace que nuestro código esté un poco desordenado. Cuando tiene varios estilos aplicados a un componente, siempre es una buena idea almacenarlos en una variable.

    Los estilos se parecen mucho a CSS, ¿no? ¿Sabes por qué? Porque se supone que deben hacerlo; no son diferentes. Esto hace que React Native sea aún más fácil de aprender para los desarrolladores web. Cuando creas una aplicación en un IDE dedicado (Xcode, por ejemplo), se te proporciona un StoryBoard para arrastrar y colocar directamente elementos de la interfaz de usuario como botones y etiquetas en la pantalla. No puedes hacer eso en React Native, lo cual, créeme, no es nada malo.

    React Native hace un uso intensivo de flexbox para posicionar elementos en la pantalla. Una vez que se sienta cómodo con Flexbox, colocar los elementos es muy sencillo. Cualquier día preferiré el diseño de Flexbox al StoryBoard, punto. Es sólo una de esas cosas que tienes que probar tú mismo para notar la diferencia.

    Guarda los cambios, dirígete al simulador y presiona Cmd + R. Deberías ver la pantalla de carga.

    Después de unos segundos deberías ver la pantalla que dice “Datos cargados”.

    4. Filtrar y seleccionar fondos de pantalla aleatorios

    En esta sección filtraremos los datos del fondo de pantalla y seleccionaremos un número específico de fondos de pantalla aleatorios.

    Esta sección se centrará más en JavaScript que en React Native. Pasaremos a crear un nuevo módulo (archivo) que se encargará de la generación de números aleatorios. Si los módulos en JavaScript le parecen nuevos, considere consultar los documentos de los módulos de Node.js.

    Vaya a la línea encima de la classdeclaración y declare una nueva constante que le indicará a la aplicación la cantidad de fondos de pantalla aleatorios que debe elegir; que sean cinco.

    const NUM_WALLPAPERS = 5;

    Ahora vamos a crear un módulo que nos ayudará con la generación de números aleatorios. Este módulo exportará dos funciones. Echemos un vistazo a cada uno de ellos.

    • uniqueRandomNumbers: Esta función toma tres argumentos. Primero está el número de números aleatorios que se devolverán. Los dos argumentos siguientes definen el rango en el que se devolverán los números aleatorios, es decir, lowerLimity upperLimit. Si llama a la función, uniqueRandomNumbers(5, 10, 20)se le devolverá una matriz de cinco números aleatorios únicos entre 10 y 20.
    • randomNumberInRange: Esta función toma dos argumentos que definen el límite inferior y superior respectivamente entre los cuales se devuelve un único número aleatorio. Por ejemplo, si llama, randomNumberInRange(2, 10)se devuelve un número aleatorio único entre 2 y 10.

    Podríamos haber fusionado ambas funciones en una, pero como soy un predicador del código de buena calidad, sigo el principio de responsabilidad única . SRP establece, más o menos, que cada función debe hacer bien una cosa y no hacer nada más. Seguir buenos principios de programación le evitará una serie de dolores de cabeza en el futuro.

     

    Cree un nuevo archivo en el mismo directorio que index.ios.js . Si quisiéramos, podemos poner estas funciones en index.ios.js , pero piénselo: para el tipo de propósito que sirve este nuevo archivo, podemos simplemente copiarlo y pegarlo en cualquiera de nuestros nuevos proyectos que requieran generación aleatoria. números y usarlos desde allí. Además, esto mantiene el código dentro de index.ios.js mucho más limpio.

    Llamaremos al archivo RandManager.js . A continuación se muestra su contenido:

    module.exports = { uniqueRandomNumbers(numRandomNumbers, lowerLimit, upperLimit) { var uniqueNumbers = []; while( uniqueNumbers.length != numRandomNumbers ) { var currentRandomNumber = this.randomNumberInRange(lowerLimit, upperLimit); if( uniqueNumbers.indexOf(currentRandomNumber) === -1 ) uniqueNumbers.push(currentRandomNumber); } return uniqueNumbers; }, randomNumberInRange(lowerLimit, upperLimit) { return Math.floor( Math.random() * (1 + upperLimit - lowerLimit) ) + lowerLimit; }};

    No olvide solicitar el RandManagermódulo en index.ios.js . Simplemente agregue: var RandManager = require(‘./RandManager.js’);debajo de la use strict;declaración. Una vez que estemos RandManagerlistos, haremos los siguientes cambios en nuestra fetchWallsJSONfunción:

    fetchWallsJSON() { var url = 'https://unsplash.it/list'; fetch(url) .then( response = response.json() ) .then( jsonData = { /***/ var randomIds = RandManager.uniqueRandomNumbers(NUM_WALLPAPERS, 0, jsonData.length); var walls = []; randomIds.forEach(randomId = { walls.push(jsonData[randomId]); }); this.setState({ isLoading: false, wallsJSON: [].concat(walls) }); /***/ }) .catch( error = console.log('JSON Fetch error : ' + error) );}

    Una vez que tenemos jsonData, recuperamos números aleatorios únicos RandManagery los almacenamos en la randomIdsmatriz. Luego recorremos esta matriz, seleccionamos los objetos de datos de fondo de pantalla presentes en un lugar determinado randomIdy los almacenamos en wallsuna matriz.

    Luego actualizamos nuestras variables de estado: isLoadinga false ya que se han descargado los datos; y wallsJSONpara walls.

    Para ver los resultados, modifique la renderResultsfunción para que se parezca a la siguiente:

    renderResults() {/***/ var {wallsJSON, isLoading} = this.state; if( !isLoading ) { return ( . View {wallsJSON.map((wallpaper, index) = { return( Text key={index} {wallpaper.id} /Text ); })} ./View ); }/***/}

    En la primera línea del interior, renderResultsestamos usando una nueva característica de ES2015 llamada desestructuración . Con la desestructuración hemos conseguido sustituir:

    var wallsJSON = this.state.wallsJSON, isLoading = this.state.isLoading;

    con:

    var {wallsJSON, isLoading} = this.state;

    ES2015 es genial, te lo digo.

    Luego, dentro de, Viewrecorremos los wallsJSONdatos recuperados usando map . Siempre que desee recorrer una colección en JSX , utilice la mapconstrucción.

    Además, al recorrer una matriz o colección y renderizar un componente, React Native requiere que proporciones keyun ID único a cada uno de los componentes secundarios que renderiza. Es por eso que ves una propiedad clave en

    Text key={index}

    Una vez que el simulador se actualiza...

    Vemos que se muestran cinco ID de fondos de pantalla aleatorios diferentes. Cambie {wallpaper.id}a {wallpaper.author}adentro renderResultsy debería ver algo como lo siguiente.

    ¡Excelente! Ahora estamos hablando. Ahora podemos recuperar y filtrar el número especificado (cinco, en este caso) de fondos de pantall






    Tal vez te puede interesar:

    1. Creación de su propia biblioteca de validación de React: la experiencia del desarrollador (Parte 3)
    2. Introducción a Quasar Framework: creación de aplicaciones multiplataforma
    3. Creación de un componente web retro que se puede arrastrar con iluminación
    4. Creación y acoplamiento de una aplicación Node.js con arquitectura sin estado con la ayuda de Kinsta

    Tutorial de React Native: creación de su primera aplicación para iOS con JavaScript (Parte 1)

    Tutorial de React Native: creación de su primera aplicación para iOS con JavaScript (Parte 1)

    Diseño de arquitectura de componentes de interfaz de usuario y tokens, con Nathan Curtis Índice Lecturas

    programar

    es

    https://pseint.es/static/images/programar-tutorial-de-react-native-creacion-de-su-primera-aplicacion-para-ios-con-javascript-parte-1-888-0.jpg

    2024-04-04

     

    Tutorial de React Native: creación de su primera aplicación para iOS con JavaScript (Parte 1)
    Tutorial de React Native: creación de su primera aplicación para iOS con JavaScript (Parte 1)

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20