Start Start reacciona nativo con la expo

Sep 11, 2025

Cómo

An image showing a React Native app running on a smartphone.

[dieciséis]

Reaccionar nativo es una plataforma que le permite construir aplicaciones móviles nativas usando JavaScript. Como su nombre lo indica, usa. Reaccionar Por lo tanto, la composición de las interfaces móviles es similar a usar reaccionar en la web. En lugar de crear componentes usando etiquetas HTML, tiene su propio conjunto de componentes que se unen a los componentes de la UI nativos.

Reaccionar nativo puede ser complicado para configurar, especialmente cuando se trata de presionar notificaciones. Debe configurar certificados y sumergirse en Objective-C para iOS y Java para Android. Sin embargo, Expo Elimina la necesidad de esto.

¿Construyendo un sitio web en lugar de una aplicación? Podrías usar un decente Creador de sitios web . Y para mantener el sitio, consigue tu Alojamiento web Correcto.

30 herramientas de diseño web para acelerar su flujo de trabajo

La Expo significa que puede crear aplicaciones nativas reaccionar y desplegarlas en las tiendas de aplicaciones utilizando solo JS. Además, ofrece un SDK con acceso a funcionalidad nativa, como notificaciones, cámara, contactos, ubicación, etc. También proporciona acceso a algunos componentes de la UI que no están incluidos en el núcleo nativo de reacción, pero a menudo se usan, como los iconos, las vistas borrosas, etc. sin necesidad de escribir una línea de código nativo.

La Expo también puede crear compilación de aplicaciones listas de envío sin necesidad de construir utilizando Xcode o Android Studio. Si no ha usado antes, puede ser un lugar de miedo, especialmente si acaba de comenzar a reaccionar nativo, o no está confiando en general con Cómo hacer una aplicación . Las aplicaciones (o proyectos) también se pueden publicar en EXPO en lugar de enviar a una App Store, que permite a los usuarios probar el proyecto a través del cliente Mobile Expo. ¡No te preocupes, esto será cubierto más tarde!

¿Estás construyendo tu aplicación con un equipo? Guarda tus archivos en accesible, confiable almacenamiento en la nube .

01. Configurar expo

La instalación de Expo es un proceso sencillo. Dirígete a la sitio y descargue la última XDE, luego instale la aplicación móvil en su teléfono o tableta. El cliente móvil permite ejecutar aplicaciones en un dispositivo real a través de su aplicación sin necesidad de ninguna licencia de desarrollador o configuración de certificado por adelantado.

Luego, puede publicar aplicaciones en el servicio de Expo para que los usuarios puedan ejecutar sus proyectos terminados a través del cliente Mobile Expo, sin necesidad de pasar por la tienda de aplicaciones y los procesos de revisión de Google Play.

La EXPO admite las aplicaciones independientes de construcción que se pueden publicar manualmente en la tienda de aplicaciones o en la tienda de juegos, sin embargo, necesitaría cuentas de desarrollador para las plataformas que libere. Programa de desarrolladores de Apple cuesta £ 79 por año y La consola de juegos de Google cuesta una tarifa única de $ 25 USD.

02. Crea tu primera aplicación

Llegamos a los negocios y creemos nuestra primera aplicación con Expo. Abra la exposición XDE, seleccione Proyecto & GT; Nuevo proyecto y seleccione la plantilla en blanco. Instale todas las dependencias e inicie el paquete nativo de reaccionar, lo que agrupa todos los activos.

Desde aquí, puede publicar la aplicación, compartir la aplicación al cliente Mobile Expo o ejecutar la aplicación en un simulador. Esta aplicación va a implicar la creación de notificaciones push, por lo que va a compartir en el cliente Mobile Expo, ya que los simuladores no los apoyan. Haga clic en el botón Compartir para obtener un código QR para escanear o la opción de enviar un enlace a través de SMS o correo electrónico. Escanee el código QR con el cliente EXPO. Esto ejecuta la aplicación a través del cliente EXPO y se abre a una pantalla con: 'abrir app.js para comenzar a trabajar en su aplicación!'

Con la aplicación en ejecución, abra el proyecto en su editor de código favorito y abre App.js.J. ¡Encuentra el texto de arriba y cámbielo al clásico 'Hello World!', ENTONCES GUARDE. ¡Debería ver la recarga de la aplicación automáticamente y tener el texto 'Hello World!' Ahora visible. ¡Magia!

Mientras se está desarrollando, agitar el dispositivo revelará un menú de desarrollador, que tiene opciones útiles para la depuración. Desde este menú, también puede regresar a la HOME EXPO: útil salir de la aplicación o cambiar a otro.

03. Añadir notificaciones

Ahora tiene una aplicación básica de configuración y ejecución, agreguemos la capacidad de enviar y recibir notificaciones. Esto normalmente exigiría a Objective-C y Java, integrando un servicio de terceros para enviar las notificaciones y también deberías configurar certificados para iOS y crear llaves para Android.

Primero, debe importar permisos y notificaciones de la Expo y crear una nueva función en la clase de aplicación:

 Importar {Permisos, notificaciones} de 'Expo';
La aplicación de clase predeterminada de exportación se extiende reactive component {
  Async RegisterForPushNotifications () {
  }
}

Aquí usas la palabra clave ASYNC para hacer uso de la función ES2017 ASYNC / AWAIT: reaccionará nativo tiene Babel trabajando bajo la campana para que pueda aprovechar toda la nueva bondad de JavaScript. Ahora, solicitemos permisos de notificación y solicitemos el token Push Expo, para identificar el dispositivo, para que la EXPO sepa dónde enviar notificaciones push:

 Async RegisterForPushNotifications () {
  Const Result = Await Permissions.askasync (Permissions.Remote_Notifications);
  Si (resultado.status! == 'concedido') {
    regreso;
  }
  const token = Await Notifications.GetExpopushtokenasync ();
  console.log (token);
}

Aquí, solicitará permiso de notificación utilizando el método Permissions.ashasync (). La alerta solo mostrará en iOS, ya que Android permite notificaciones de forma predeterminada. A pesar de esto, en realidad todavía necesita correr por la misma lógica en Android, ya que es posible apagar las notificaciones.

A continuación, compruebe la respuesta. Si no se otorgan las notificaciones, entonces puede detenerse y regresar de la función. Si se otorgan las notificaciones, obtiene el token de push del servicio de exposición. Finalmente, puede registrar el token para su uso posterior para probar las notificaciones y esto se registrará en la Expo XDE.

Vale la pena señalar en este punto que, en iOS, esta alerta solo se puede activar una vez por diseño; Por lo tanto, si un usuario niega el permiso, es posible que desee considerar agregar un Aviso personalizado o alerta antes de regresar de la función. Para habilitar las notificaciones en este punto, el usuario deberá ir a la configuración de la aplicación (en nuestro caso, esto será Expo) & GT; Notificaciones y permitirles allí. Debido a esto, deberá eliminar el cliente Mobile Expo y luego volver a instalar si desea probar la alerta de permiso en iOS más de una vez.

Además, la Expo proporciona un método llamado Permissions.getasync () y esto funciona de manera similar a Permissions.Askasync (), solo sin disparar la alerta de iOS. Esto podría ser útil si desea verificar el estado primero para crear un flujo personalizado que le pedirá permisos, por ejemplo. Si la alerta de iOS se ha activado anteriormente (recuerde, solo se puede disparar una vez por instalación de la aplicación), el permisos.askasync () devolverá la misma información que permisos.getasync (), por lo que en nuestro caso de uso no necesitamos usar permisos.getasync ().

Luego, debe llamar a esta función en el método de ciclo de vida de ComponentDidMount para que se ejecute en la aplicación de inicio:

 ComponentDidMount () {
  esto .registerforpushnotifications ();
}

A continuación, si acepta el permiso de notificación, su aplicación podrá recibir notificaciones locales y remotas. Luego, las notificaciones locales se configuran y se envían a través del dispositivo directamente a la aplicación y no requieren una conexión a Internet. Las notificaciones remotas provienen de un servidor y envíen la notificación a través del Sistema de notificación de Apple Push Notification (APNS) o los servicios de Google Cloud Messaging (GCM). Este proceso también requerirá acceso a una conexión a Internet para recibirlos.

La Expo tiene un servicio para enviar notificaciones en https://exp.host/--/api/v2/push/send; Todo lo que necesita hacer es enviar algunos datos. Esto se verá un poco como lo siguiente:

 {
  // el token de empuje.
  "A": & lt; token de la aplicación & gt;
  // el título de notificación.
  "Título": "Título de la notificación",
  // el organismo de notificación.
  "Cuerpo": "Cuerpo de notificación",
  // Pase en datos como objeto, esto se puede usar al manipular la notificación.
  "Datos": {"Valor": "¡Hola mundo!" }
}

A newly created React Native app showing a message with the words 'Hello world!'

Antes de probar una notificación, configuraremos nuestra aplicación para manejar notificaciones si la aplicación está abierta. Por diseño, iOS y Android no muestran una notificación cuando una aplicación está abierta. También puede manejar los datos enviados en el mensaje PUSH aquí, en caso de que debamos actuar en él. Vamos a crear una nueva función para manejar esto y alertar la propiedad Valor de Datos:

 Handlenotificación (notificación) {
  alerta (Notification.Data.Value);
}

Luego, en nuestro método de ciclo de vida de ComponentDidMount, debe configurar un oyente, que llama al controlador de notificaciones que acabamos de crear:

 ComponentDidMount () {
  esto .registerforpushnotifications ();
  Notificaciones.Addlistener (esto. Handlenotificación);
}

Ahora estás configurado. Enviemos una notificación push con una solicitud de curl:

 CURL \
  -X post \
  -H "Tipo de contenido: Aplicación / JSON" \
  -D '{
    "A": "& lt; token & gt;",
    "Título": "Título de la notificación",
    "Cuerpo": "Cuerpo de notificación",
    "Datos": {"Valor": "¡Hola mundo!" }
  } '\
  https://exp.host/--/api/v2/push/send

Puedes agarrar este comando de rizo aquí . Si no está familiarizado con el rizo, puede enviar la solicitud usando algo como Cartero , que utiliza una GUI para enviar solicitudes.

Una vez que la solicitud haya enviado, ahora debe ver la notificación. No hay limitaciones al usar el servicio PUSH EXPO. En un escenario del mundo real, se recomienda a usar la API de lotes enviando una matriz de notificaciones push, en lotes de 100, para ser enviados para la eficiencia:

 [
  {// Objeto de notificación como arriba},
  {// otro objeto de notificación}
]

04. Publicar con Expo

Entonces, ahora que tenemos una nueva aplicación nativa de reaccionar brillante (¡incluso si no hace mucho aún!), ¿Cómo permitimos que otros lo usen sin ejecutarlo desde la Expo XDE? La forma más sencilla es hacer clic en Publicar de la XDE. Esto publicará el proyecto a EXPO y un enlace aparecerá en su perfil, que puede encontrar en https://expo.io/@< ;username>.

Cuando visite el enlace del proyecto publicado, habrá un código QR para escanear (ubicado entre las mismas opciones que la XDE) con el cliente Mobile Expo, al igual que durante el desarrollo. Si queremos actualizar la aplicación, todo lo que debemos hacer es volver a publicar y los cambios estarán disponibles para el usuario al ejecutar la aplicación nuevamente.

Este artículo se publicó originalmente en el número 297 de Net, la revista más vendida del mundo para diseñadores y desarrolladores web. Suscríbete a la red aquí .

¿Quieres aprender más formas en que puedes dominar reaccionar?

Kristijan Ristovski is giving his workshop Learn How to Think in React at Generate London from 19-21 September 2018.

Si está interesado en aprender más sobre reaccionar, asegúrese de que haya recogido su boleto para Generar Londres del 19 al 21 de septiembre de 2018. . Habiendo fundado reaccionar la academia para enseñar reaccionar en todo el mundo y lanzar. sizzyy.co y ok-google.io , Kristijan Ristovski entregará su taller: aprenderá a pensar en reaccionar, en la que explorará las mejores prácticas de reaccionar y enseñarle soluciones a problemas reales que puede encontrar en el proceso de construir una aplicación.

Generar Londres tiene lugar del 19 al 21 de septiembre de 2018. Obtenga su boleto ahora .

Artículos relacionados:

Haz que su cabeza reacione con estos cinco factores.
10 consejos de reactivos expertos que necesitas saber hoy
Construir una aplicación móvil nativa con reaccionar nativo

Start Start reacciona nativo con la expo

01. Configurar expo

02. Crea tu primera aplicación

03. Añadir notificaciones

04. Publicar con Expo

¿Quieres aprender más formas en que puedes dominar reaccionar?

Cómo - Artículos más populares

Construya un componente principal de SEO para NEXTJS / REACT

Todo lo que necesita saber sobre el nuevo nodo.js 8

Crea un grabado digital un boceto

Introducción a las pruebas de facilidad de uso

Cómo crear manga con un Wild West Twist

Crea una perspectiva por deformar tus texturas en Photoshop

Cómo esculpir y plantear una cabeza de dibujos animados en Zbrush

Cómo dibujar Harley Quinn

Categorías