Cómo crear una aplicación de noticias con React Native

Para mi primera publicación en Medium, quería compartir con ustedes cómo hice una aplicación de noticias con React Native.

Publicado originalmente en mi blog.

Requisitos para crear la aplicación:

  • Una comprensión básica de JavaScriptidioma .
  • Instalar: Node.js, reaccionar nativo usando npm.
  • Bibliotecas utilizadas: moment, react-native, react-native-elements.

Si no está familiarizado con estos recursos, no se preocupe, son bastante fáciles de usar.

Los temas que cubriremos en el post son:

  • API de noticias
  • Obtener API
  • FlatList
  • Tire hacia abajo para refrescar
  • Enlace

Y más… ¡así que comencemos!

Puede encontrar el repositorio del proyecto aquí

API de noticias

Una API simple y fácil de usar que devuelve metadatos JSON para titulares y artículos publicados en toda la web en este momento. - NewsAPI.org

En primer lugar, debería seguir adelante y registrarse para Noticias API para obtener su libre apiKey( su clave de autenticación ).

Crea un nuevo proyecto React Native y llámalo news_app(o como quieras). En el directorio del proyecto, cree una nueva carpeta y llámela src. En el src directorio, cree una carpeta y asígnele un nombre components. Entonces, su directorio de proyecto debería verse así:

En la src carpeta, cree un nuevo archivo llamado news.js. En este archivo vamos a buscar el JSON que contiene los titulares de la API de noticias.

news.js

Asegúrese de reemplazar YOUR_API_KEY_HERE con su propia clave de API. Para obtener más información sobre la API de noticias, vaya anewsapi docs .

Ahora declaramos la getNews función, que va a buscar los artículos por nosotros. Exporta la función para que podamos usarla en nuestro App.jsarchivo.

App.js

En el constructor definimos el estado inicial. articles almacenará nuestros artículos después de que los recuperemos y refreshingnos ayudará a actualizar la animación.Observe que configuré el refreshing bool en verdadero, porque cuando iniciamos la aplicación, queremos que la animación comience mientras cargamos los artículos (titulares de noticias).

componentDidMountse invoca inmediatamente después de montar un componente. Dentro de él llamamos al fetchNewsmétodo.

componentDidMount() { this.fetchNews();}

En fetchNewsllamamos a lo getNews()que devuelve una promesa. Entonces usamos el .then()método que toma una función de devolución de llamada, y la función de devolución de llamada toma un argumento ( los artículos ).

Ahora asigne los artículos en el estado al argumento de artículos. Solo escribí articlesporque es una nueva sintaxis de ES6, lo que significa { articles: articles }, y lo configuramos refreshing como falso para detener la animación de la ruleta.

fetchNews() { getNews().then( articles => this.setState({ articles, refreshing: false }) ).catch(() => this.setState({ refreshing: false }));}

.catch()se llama en casos rechazados.

handleRefreshEl método va a iniciar la animación giratoria y llamar al fetchNews()método. Pasamos () => this.fetchNews (), por lo que se llama inmediatamente después de que asignamos el estado.

handleRefresh() { this.setState({ refreshing: true },() => this.fetchNews());}

Dentro del método de render, devolvemos un FlatListcomponente. Luego pasamos algunos accesorios. dataes el conjunto de artículos de this.state. La renderItemtoma una función para representar cada elemento de la matriz, pero en nuestro caso sólo se devuelve el Articlecomponente que importó anteriormente (vamos a llegar a ella). Y pasamos el artículo del artículo como un accesorio para usar más adelante en ese componente.

Article.js

En src / components crea un nuevo archivo JavaScript y llámalo Article.js

Comencemos instalando dos bibliotecas simples usando npm:react-native-elements , que nos da algunos prefabricadoscomponentes que podríamos usar, y momento que manejará nuestro tiempo.

Instálelos usando npm:

npm install --save react-native-elements moment

En Article.js:

Muchas cosas están pasando aquí. Primero, comenzamos por desestructurar el article accesorio y el styles objeto definido debajo de la clase .

Dentro del método de render, definimos la constante de tiempo para almacenar la hora en que se publicó el artículo. Usamos la biblioteca de momentos para convertir la fecha al tiempo transcurrido desde entonces , y pasamos publishedAto el tiempo desde ahora si publishedAtes null.

defaultImg se le asigna una URL de imagen en caso de que la URL de la imagen del artículo sea nula.

El método de render vuelve TouchableNativeFeedbacka manejar cuando el usuario presiona la tarjeta. Le pasamos algunos accesorios:, useForgroundque le dice al elemento que use el primer plano al mostrar el efecto dominó en la tarjeta, y onPressque toma una función y la ejecuta cuando el usuario presiona la tarjeta. Pasamos () => Linking.openUrl(url), que simplemente abrirá la URL del artículo completo cuando presionemos la tarjeta.

La tarjeta tiene tres accesorios:, featuredTitle que es un título colocado sobre la imagen, featuredTitleStyle para darle estilo, y imagecuál es la imagen del artículo del accesorio del artículo. De lo contrario, si es así null, será el defaultImg.

.. featuredTitle={title} featuredTitleStyle={featuredTitleStyle} image={ defaultImg }..

En cuanto al elemento de texto, contendrá la descripción del artículo.

{description}

Agregamos un divisor para separar la descripción detime and source name.

Below the Divider , we have a View that contains the source name and the time the article was published.

.. {source.name.toUpperCase()} {time}..

After the class, we defined the styles for these components.

Now if we run the app:

There you go! The source code for the app is available on GitHub: HERE, feel free to fork it.

I hope you enjoyed my article! If you have any questions at all, feel free to comment or reach me on twitter and I will definitely help :)

?Buy me a coffee?

Next Story ?How to build native desktop apps with JavaScript