Jump Début Réagissez Natif avec Expo

Sep 14, 2025

Comment

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

[dix] [dix] [dix]

[dix]

Réagir comme indigène est une plate-forme qui vous permet de créer des applications mobiles natales à l'aide de JavaScript. Comme son nom l'indique, il utilise Réagir , de sorte que la composition des interfaces mobiles est similaire à l'utilisation de réaction sur le Web. Plutôt que de créer des composants utilisant des balises HTML, il possède son propre ensemble de composants qui se lient aux composants d'interface utilisateur natif.

[dix]

Réagir Natif peut être délicat à mettre en place, surtout en ce qui concerne les notifications push. Vous devez configurer des certificats et plonger dans Objective-C pour iOS et Java pour Android. Pourtant, Expo Élimine le besoin de cela.

Construire un site Web plutôt qu'une application? Vous pouvez utiliser un décent Générateur de site Web . Et de maintenir le site, obtenez votre hébergement Web tache sur.

30 outils de conception Web pour accélérer votre flux de travail

Expo signifie que vous pouvez créer des applications natives réagissantes et les déployer dans les magasins d'applications utilisant uniquement JS. De plus, il offre un SDK avec accès à des fonctionnalités natives telles que les notifications, la caméra, les contacts, l'emplacement, etc. Il donne également accès à certains composants de l'interface utilisateur qui ne sont pas inclus dans le noyau natif de réagisme, mais sont souvent utilisés, tels que des icônes, des vues floues, etc. sans avoir à écrire une ligne de code natif.

L'Expo peut également créer une application de soumission-prête à la soumission sans avoir à construire à l'aide de Xcode ou de studio Android. Si vous n'avez pas été utilisés non plus, ils peuvent être un lieu effrayant, surtout si vous commencez simplement à réagir de Native - ou n'est pas confiant en général avec Comment faire une application . Les applications (ou les projets) peuvent également être publiées sur Expo plutôt que de soumettre à un App Store, ce qui permet aux utilisateurs d'essayer le projet via le client mobile Expo. Ne vous inquiétez pas, cela sera couvert plus tard!

[dix]

Vous construisez-vous votre application avec une équipe? Enregistrez vos fichiers dans Accessible, fiable stockage en ligne .

01. Configurer Expo

L'installation d'Expo est un processus simple. Dirigez-vous vers la placer et téléchargez la dernière xde, puis installez l'application mobile sur votre téléphone ou votre tablette. Le client mobile permet d'exécuter des applications sur un périphérique réel via leur application sans avoir besoin de licences de développeur ni de configuration de certificat.

Vous pouvez ensuite publier des applications au service Expo afin que les utilisateurs puissent exécuter vos projets finis via le client Mobile Expo, sans avoir à passer via les processus d'application de l'App Store et de Google Play.

Expo prend en charge les applications autonomes du bâtiment qui peuvent être publiées manuellement sur l'App Store ou Play Store, mais vous aurez besoin de comptes de développeurs pour les plates-formes que vous publiez. Programme de développeur d'Apple coûte 79 £ par an et Console de jeu de Google coûte des frais ponctuels de 25 USD.

02. Créez votre première application

An image showing the Expo XDE. — Ce XDE nous donne des informations détaillées sur le projet. La fenêtre gauche est le réact de l'emballeur natif et la fenêtre droite affiche les journaux des appareils.

Faisons aux entreprises et créons notre première application avec Expo. Ouvrez l'Expo Xde, sélectionnez Project & GT; Nouveau projet et sélectionnez le modèle vierge. Installez toutes les dépendances et lancez le réact de l'emballeur natif, qui regroupe tous les actifs.

À partir de là, vous pouvez publier l'application, partager l'application au client Expo Mobile ou exécuter l'application sur un simulateur. Cette application va impliquer la création de notifications push, de sorte que vous allez partager au client Mobile Expo, car les simulateurs ne les apportent pas. Cliquez sur le bouton Partager pour obtenir un code QR pour numériser ou l'option pour envoyer un lien via SMS ou par courrier électronique. Scannez le code QR avec le client Expo. Ceci exécute l'application via le client Expo et il s'ouvre jusqu'à un écran avec: 'Ouvrir app.js pour commencer à travailler sur votre application! "

Avec l'application en cours d'exécution, ouvrez le projet dans votre éditeur de code préféré et ouvrez App.js. Trouvez le texte ci-dessus et changez-le au classique 'Hello World!', Puis économisez. Vous devriez voir l'application recharger automatiquement et avoir le texte 'Hello World!' Maintenant visible. La magie!

Pendant que vous développez, secouer le périphérique révélera un menu de développeur, qui a des options utiles pour le débogage. Dans ce menu, vous pouvez également revenir à l'Expo Home - utile pour sortir de l'application ou passer à un autre.

03. Ajouter des notifications

Vous avez maintenant une application de base configurée et en cours d'exécution, ajoutons la possibilité d'envoyer et de recevoir des notifications. Cela nécessiterait normalement Objective-C et Java, intégrant un service tiers pour envoyer les notifications et vous aurez également besoin de configurer des certificats pour iOS et créer des clés pour Android.

Premièrement, vous devez importer des autorisations et des notifications d'Expo et créez une nouvelle fonction dans la classe d'applications:

 Importer {Autorisations, notifications} de 'Expo';
L'exportation par défaut de la classe application s'étend Reall.component {
  async registreFnotifications () {
  }
}

Ici, vous utilisez le mot-clé ASYNC pour utiliser la fonction ES2017 Async / AWAIT-AWAIT-RECISION DANS LE NATIF DANS LE BAISON DU BAISSON SOUS COOCHE, vous pouvez également tirer parti de la nouvelle bonté JavaScript. Maintenant, demandons les autorisations de notification et récupérer le jeton Push Expo - pour identifier le périphérique - de sorte que l'Expo sait où envoyer des notifications push:

 async registreFnotifications () {
  const résultat = attendre des autorisations.Askasync (autorisations.remote_notifications);
  Si (résultat.Status! == 'accordé') {
    revenir;
  }
  const Token = Await notifications.getexpopushTokenaSync ();
  console.log (jeton);
}

Ici, vous demanderez une autorisation de notification à l'aide de la méthode Autorisations.Askasync (). L'alerte ne montrera que sur iOS comme Android active les notifications par défaut. Malgré cela, vous avez toujours besoin de courir dans la même logique sur Android, car il est possible de désactiver les notifications.

Ensuite, vérifiez la réponse. Si les notifications ne sont pas accordées, vous pouvez arrêter et revenir hors de la fonction. Si des notifications sont accordées, vous obtenez le jeton push du service Expo. Enfin, vous pouvez enregistrer le jeton pour une utilisation ultérieure pour tester des notifications et cela sera connecté à l'Expo XDE.

Il convient de noter à ce stade que - sur iOS - cette alerte ne peut être déclenchée qu'une fois par conception; Donc, si un utilisateur nie la permission, vous pouvez envisager d'ajouter un avis personnalisé ou une alerte avant de revenir de la fonction. Pour activer les notifications à ce stade, l'utilisateur devra accéder aux paramètres de l'application (dans notre cas, ce sera Expo) & GT; Notifications et leur permettre de là. Pour cette raison, vous devrez supprimer le client Mobile Expo, puis réinstaller si vous souhaitez tester l'alerte d'autorisation sur iOS plus d'une fois.

En outre, Expo fournit une méthode appelée permissions.getaSync () et cela fonctionne de la même manière que les autorisations .Askasync (), sans licenciement de l'alerte iOS. Cela pourrait être utile si vous souhaitez vérifier l'état d'abord pour créer un flux personnalisé qui vous demandera des autorisations, par exemple. Si l'alerte iOS a déjà été déclenchée (rappelez-vous, il ne peut être tiré qu'une seule fois par application d'installation), les autorisations.Askasync () renvoient les mêmes informations que les autorisations.getaSync (), donc dans notre cas d'utilisation dont nous n'avons pas besoin utiliser les autorisations.getaSync ().

Vous devez ensuite appeler cette fonction dans la méthode ComponentDidMount LifeCycle de manière à ce qu'il s'exécute sur l'application lancement:

 ComponentDidMount () {
  cela.registerforpushnotifications ();
}

[dix]

Ensuite, si vous acceptez l'autorisation de notification, votre application sera en mesure de recevoir des notifications locales et distantes. Les notifications locales sont ensuite configurées et envoyées via l'appareil directement à l'application et ne nécessitent pas de connexion Internet. Les notifications distantes proviennent d'un serveur et envoient la notification via le système de notification Push Push (APNS) ou à Google Cloud Messaging (GCM). Ce processus nécessitera également l'accès à une connexion Internet pour les recevoir.

Expo dispose d'un service d'envoi de notifications à https://exp.host/-/api/v2/push/send; Tout ce que vous avez à faire est de vous envoyer des données. Cela ressemblera à un peu comme ce qui suit:

 {
  // le jeton push.
  "To": & lt; jeton de l'application & gt;
  // le titre de notification.
  "Titre": "Titre de notification",
  // l'organisme de notification.
  "Corps": "corps de notification",
  // passe dans les données comme objet, cela peut être utilisé lors de la manipulation de la notification.
  "Données": {"Valeur": "Bonjour World!" }
}

A newly created React Native app showing a message with the words 'Hello world!' — La boîte à outils Expo rend l'envoi et la réception de notifications push sans effort

Avant de tester une notification, nous configurerons notre application pour gérer les notifications si l'application est ouverte. Par conception, iOS et Android ne montrent pas de notification lorsqu'une application est ouverte. Vous pouvez également gérer toutes les données envoyées dans le message PUSH, au cas où nous devions agir sur elle. Créons une nouvelle fonction pour gérer cela et alerter la propriété de la valeur de données:

 Handlenotification (notification) {
  alerte (notification.data.value);
}

Ensuite, dans notre méthode ComponentDidDidMount LifeCycle, vous devez configurer un auditeur, qui appelle le gestionnaire de notification que nous venons de créer:

 ComponentDidMount () {
  cela.registerforpushnotifications ();
  Notifications.addlistener (this.handlenotification);
}

Vous êtes maintenant défini. Envoyons une notification push avec une demande de courbure:

 CURL \
  -X post \
  -H "Type de contenu: Application / Json" \
  -ré '{
    "À": "& lt; teken & gt;",
    "Titre": "Titre de notification",
    "Corps": "corps de notification",
    "Données": {"Valeur": "Bonjour World!" }
  } '\
  https://exp.host/--/api/v2/push/send

Vous pouvez saisir cette commande CURL ici . Si vous n'êtes pas familier avec CURL, vous pouvez envoyer la demande en utilisant quelque chose comme Facteur , qui utilise une interface graphique pour envoyer des demandes.

Une fois la demande envoyée, vous devriez maintenant voir la notification passée. Il n'y a pas de limitations à l'aide du service push Expo. Dans un scénario mondial réel, il est encouragé d'utiliser l'API de lot en envoyant une gamme de notifications push, par lots de 100, à envoyer pour une efficacité:

 [
  {// objet de notification comme ci-dessus},
  {// un autre objet de notification}
]

04. Publier avec Expo

Alors, maintenant que nous avons une nouvelle application native réagissante brillante (même si elle ne fait pas encore beaucoup!), Comment lesisons-nous les autres l'utiliser sans le gérer d'Expo XDE? La manière la plus simple est en cliquant sur Publier depuis le XDE. Cela publiera le projet à Expo et un lien apparaîtra sur votre profil, que vous pouvez trouver à l'adresse https://expo.io/@< -username> ;.

Lorsque vous visitez le lien Publié du projet, il y aura un code QR pour numériser (situé entre les mêmes options que le XDE) avec le client mobile Expo, tout comme pendant le développement. Si nous voulons mettre à jour l'application, tout ce que nous devons faire est de la republière et les modifications seront disponibles pour l'utilisateur lors de l'exécution de l'application.

Cet article a été publié à l'origine dans le numéro 297 de Net, le magazine le plus vendu au monde pour les concepteurs et les développeurs Web. Abonnez-vous à Net ici .

Vous voulez apprendre plus de moyens que vous pouvez maîtriser?

Kristijan Ristovski is giving his workshop Learn How to Think in React at Generate London from 19-21 September 2018. — Kristijan Ristovski donne à son atelier apprendre à penser à réagir pour générer Londres du 19 au 21 septembre 2018

Si vous êtes intéressé à en apprendre davantage sur React, assurez-vous que vous avez pris votre billet pour Générez Londres du 19 au 21 septembre 2018 . Avoir fondé React Academy pour enseigner réagir dans le monde entier et lancé sizzy.co et ok-google.io Kristijan Ristovski fournira son atelier - apprendre à penser à réagir - dans lequel il explorera les meilleures pratiques et enseignera vos solutions à de vrais problèmes que vous pourriez rencontrer dans le processus de construction d'une application.

Generate London a lieu du 19 au 21 septembre 2018. Obtenez votre billet maintenant .

Articles Liés: