Cómo crear un lector de noticias con React Native componente de página web

En la primera parte de esta serie, aprendió cómo configurar React Native en su máquina, crear y usar componentes personalizados y usar bibliotecas de terceros, como moment.js. En este tutorial, aprenderá a realizar solicitudes de red utilizando ha podido recuperar, renderizar una página web usando el incorporado WebView componente, y ejecutar la aplicación en un dispositivo físico.

1. Fetch API Wrapper

En la primera parte de esta serie, utilizamos el api Funciona, pero aún no la hemos definido. Comience creando un src directorio y agregar un archivo a ella, api.js. Abra el archivo y agregue lo siguiente:

module.exports = function (url) return fetch (url) .then (function (response) return response.json ();). then (function (json) return json;); 

Este archivo usa el ha podido recuperar función, que por defecto está disponible en React Native. Esta función permite que la aplicación realice solicitudes de red. Si has usado jQuery, es bastante similar al $ .ajax función. Usted especifica una URL y algunos datos opcionales, y obtiene una respuesta.

La única diferencia es que necesitas hacer un poco de trabajo extra. La función para capturar la primera promesa devuelve la respuesta sin formato, lo que significa que debe llamar al json método en el respuesta para obtener la promesa que devuelve la cadena JSON. Así que tienes que devolver el resultado de esto y capturar la promesa llamando al entonces Funciona una vez más y pasa la función que será llamada una vez que la promesa se resuelva.

La cadena JSON se pasaría entonces como un argumento a esta función, por lo que simplemente la devolveremos. los ha podido recuperar método devuelve una promesa por lo que cuando llamamos a la api método, todavía tenemos que llamar al entonces método para capturar la respuesta real, tal como lo hicimos en la primera parte de esta serie.

api (story_url) .then ((story) => …);

2. Página web Componente

los Página web El componente es responsable de la prestación de una página web. Utiliza el WebView componente para hacerlo.

var React = require ('react-native'); var AppRegistry, StyleSheet, Text, View, WebView = React; var Button = require ('react-native-button'); var GiftedSpinner = require ('react-native-gifted-spinner'); var _ = require ('lodash'); var WebPage = React.createClass (getInitialState: function () return isLoading: true;, render: function () return (   Espalda   this.truncate (this.state.pageTitle)   this.state.isLoading &&        ); , truncate: function (str) return _.truncate (str, 20); , onNavigationStateChange: function (navState) if (! navState.loading) this.setState (isLoading: false, pageTitle: navState.title); , back: function () this.props.navigator.pop (); ); var styles = StyleSheet.create (container: flex: 1, webview_header: paddingLeft: 10, backgroundColor: '# FF6600', flex: 1, justifyContent: 'space-between', flexDirection: 'row', header_item : paddingLeft: 10, paddingRight: 10, justifyContent: 'center', webview_body: flex: 9, button: textAlign: 'left', color: '#FFF', page_title: color: '#FFF ', spinner: alignItems:' flex-end '); module.exports = WebPage;

Primero, hacemos un poco de mantenimiento creando las variables que necesitamos y solicitando las bibliotecas que usaremos.

var React = require ('react-native'); var AppRegistry, StyleSheet, Text, View, WebView = React; var Button = require ('react-native-button'); var GiftedSpinner = require ('react-native-gifted-spinner'); var _ = require ('lodash');

A continuación, creamos la Página web componente.

var WebPage = React.createClass (…);

Nosotros fijamos esta cargando a cierto como el estado por defecto. Esta propiedad es responsable de determinar si mostrar o no el girador. De forma predeterminada, el selector debe estar visible para indicar que la página se está cargando..

getInitialState: function () return isLoading: true; ,

A continuación, renderizamos el componente. Al igual que el componente de elemento de noticias, este también tiene un encabezado y un cuerpo. El encabezado contiene un botón Atrás, el título de la página y una rueda giratoria..

render: function () return (   Espalda   this.truncate (this.state.pageTitle)   this.state.isLoading &&        ); ,

El cuerpo contiene la WebView componente. los WebView componente tiene un url y onNavigationStateChange atributos los url es la URL que se pasó de la ver pagina función en el Artículos de noticias componente anterior. Entonces cuando se ejecuta el siguiente código:

this.props.navigator.push (name: 'web_page', url: url);

los renderScene método en index.android.js también se ejecuta y se le pasa la URL:

renderScene: función (ruta, navegador) var Component = ROUTES [route.name]; regreso (  ); ,

Así es como tenemos acceso a la URL extrayéndola de los accesorios: this.props.url.

Volvamos a los atributos añadidos a la WebView componente. Tenemos el onNavigationStateChange atributo, que se utiliza para especificar la función que se ejecutará siempre que la vista web navegue a una nueva página. Así es como se ve esa función:

onNavigationStateChange: function (navState) if (! navState.loading) this.setState (isLoading: false, pageTitle: navState.title); ,

Cuando se llama a la función anterior, Estado del nav se pasa como un argumento. Esto contiene información sobre el estado actual de la vista web, como el título de la página y si se está cargando o no. Este es el lugar perfecto para actualizar el estado. Cuando la página ya no se está cargando, configuramos esta cargando a falso y establecer un valor para el Título de la página.

A continuación, tenemos la atrás Función, que hace que el navegador retroceda una página. Esto se llama cuando el usuario pulsa el botón Atrás en el encabezado.

back: function () this.props.navigator.pop (); 

los truncar la función limita la longitud de lo que se pasa a la función. Usamos esta función para limitar el texto del título de la página web..

truncar: function (str) return _.truncate (str, 20); ,

La hoja de estilo se ve así:

var styles = StyleSheet.create (container: flex: 1, webview_header: paddingLeft: 10, backgroundColor: '# FF6600', flex: 1, justifyContent: 'espacio entre', flexDirection: 'row', header_item : paddingLeft: 10, paddingRight: 10, justifyContent: 'center', webview_body: flex: 9, button: textAlign: 'left', color: '#FFF', page_title: color: '#FFF ', spinner: alignItems:' flex-end ');

Por último, exponga el componente al mundo exterior:

module.exports = WebPage;

3. Ejecutando la aplicación

Para ejecutar la aplicación, necesitas un dispositivo Android o un emulador. Si quieres usar un emulador, te recomiendo usar Genymotion. Puede ejecutar la aplicación ejecutando el siguiente comando:

reaccionar nativo correr-android

Este comando instala y lanza la aplicación. Pero obtendrá el siguiente error si intenta hacerlo:

Esto se debe a que React Native espera que el servidor React se ejecute en su máquina. El servidor React compila la aplicación cada vez que guarda los cambios en su editor de texto. los reaccionar nativo correr-android El comando solo se utiliza para ejecutar la aplicación con el fin de probar y depurar la aplicación. Es por eso que depende del servidor React para compilar realmente la aplicación.

Para deshacerse del error, necesita ejecutar el inicio nativo reactivo comando para iniciar el servidor. Esto toma un tiempo en la primera ejecución, pero cuando llega a la parte donde dice lo siguiente:

 Gráfico de dependencia del edificio (35135ms)

Puede abrir una nueva ventana de terminal en el directorio de su proyecto y ejecutar adb shell input keyevent 82. Esto abre el menú del desarrollador en el dispositivo o emulador. Una vez que se abre el menú, seleccione ajustes de desarrollo luego selecciona servidor y puerto de depuración.

Esto abre un mensaje que le solicita que ingrese la dirección IP y el puerto de su computadora. Averigüe la dirección IP interna de su computadora e ingrésela en el indicador junto con el puerto 8081, que es el puerto predeterminado en el que se ejecuta el servidor React. En otras palabras, si su dirección IP es 192.168.254.254, luego entra 192.168.254.254:8081.

Después de eso, vuelve al menú del desarrollador y selecciona recargar JS. Esto vuelve a cargar la aplicación para que detecte la instancia del servidor React en ejecución. La aplicación debería funcionar correctamente sin problemas..

Si desea realizar una prueba en un dispositivo iOS, siga la guía en el sitio web React Native.

4. próximos pasos

Hemos construido una aplicación de lector de noticias bastante ordenada con React Native. ¿Que sigue? Aquí hay algunas ideas si desea obtener más información sobre React Native:

• Mejore el código dividiendo la aplicación en algunos componentes más reutilizables. Comience mirando el código duplicado. Por ejemplo, en la aplicación que creamos, hemos duplicado el encabezado y los componentes dentro de ella. Lo que puede hacer es crear un componente de encabezado que acepte el título como la propiedad y luego lo requiera en cada página donde necesite un encabezado..
• Mejore el tiempo de respuesta de la aplicación creando un servidor que almacene en caché los elementos de la API de Hacker News. Esto le permite realizar solo una solicitud de red que contiene todas las noticias en lugar de tener que realizar varias solicitudes de red como hicimos en este tutorial..
• Genera un APK firmado para que puedas distribuir la aplicación en Google Play. Para iOS, puedes usar Xcode para distribuir tu aplicación a la App Store de Apple.
• Explore la documentación para las API que acceden a las capacidades nativas del dispositivo, como la cámara.
• Echa un vistazo a la repo de Awesome React Native en Github. Ese repositorio contiene una lista de componentes, recursos y herramientas que puede usar con React Native.
• Si desea mantenerse actualizado con las noticias sobre React Native, suscríbase al boletín React Native..

Conclusión

Eso es. En este tutorial, aprendiste a trabajar con React Native para crear una aplicación de lector de noticias que habla con la API de Hacker News. Si tiene alguna pregunta, colóquela en los comentarios a continuación y haré todo lo posible por responderlas. Puede encontrar los archivos de origen de este tutorial en GitHub. Gracias por leer.