La création d'une application mobile est devenue plus facile pour les développeurs Web car la majorité des connaissances utilisées dans la bibliothèque React.js pouvaient être réutilisées dans React Native.
Ici à Imaginary Cloud, nous utilisons React Native pour la possibilité de partager du code entre le Web et le mobile et de disposer d'applications IOS et Android dans une seule base de code. Cela nous donne le temps de travailler sur les choses qui comptent vraiment, comme la qualité du produit numérique final.
L'un de nos projets utilise Expo comme outil pour gérer certaines complexités de React Native, telles que : erreurs de bibliothèque (le package n'est pas installé correctement), registre des applications (en oubliant de configurer le nom de l'application après les avoir créées) et certains erreurs de serveur (cela peut être résolu en redémarrant le serveur). Bien qu'elle soit d'une grande aide, Expo ne résout pas tous les problèmes que pose la création d'une application mobile avec une bibliothèque multiplateforme.
Dans cet article, je vais énumérer 5 erreurs auxquelles nous avons été confrontés en tant que développeurs lors de la création d'une application mobile dans React Native (à l'aide d'Expo) et comment nous les avons résolues. Mais d'abord, je vais vous présenter brièvement cet outil : Expo.
Expo est une plateforme dotée d'un ensemble d'outils et de services conçus autour de React Native et de son écosystème qui nous aident à développer, créer et déployer rapidement des applications IOS et Android.
Cela nous permet d'avoir un raccourci vers les configurations natives, de gérer les fichiers binaires et de vous laisser accéder au code JavaScript. Expo nous aide également à tester l'application mobile sur les appareils IOS, comme j'en parlerai plus loin dans cet article.
Comme nous l'avons mentionné plus haut, nous avons utilisé Expo pour filtrer les principaux problèmes courants de React Native.
Si vous avez déjà travaillé avec React Native ou si vous êtes sur le point de créer votre prochaine application mobile à l'aide de cette bibliothèque, vous rencontrerez probablement quelques problèmes. Voici les 5 principaux problèmes que nous avons rencontrés et comment nous les avons résolus :
Au cours de la première phase de notre application, tout fonctionnait bien, car nous ne faisions que tout tester sur IOS (nous n'avions pas prévu de lancer l'application sur des appareils Android). Au cours de la deuxième phase, on nous a dit qu'une version Android était également nécessaire. Alors que nous nous reposions l'esprit tranquille, car l'outil que nous avons choisi pouvait y parvenir, des problèmes ont commencé à apparaître.
La première exécution sur l'émulateur Android n'a pas fonctionné comme prévu. Alors que nous étions en train de déboguer (ce qui était très difficile à faire en raison du manque de support de débogage), l'émulateur Android est tombé en panne et n'a pas affiché le message d'erreur. Nous avons trouvé un moyen de capturer le message d'erreur en enregistrant l'écran. Cela nous a permis de découvrir que le changement de style effectué dynamiquement pour gérer l'animation des éléments de l'écran de connexion ne fonctionne pas sur Android de la même manière que sur IOS. Android ne prend pas en charge les transformations flexibles. Nous étions en train de remplacer les colonnes par des lignes. Nous avons donc dû changer d'approche pour que cette animation fonctionne correctement sur IOS et Android.
Avant d'utiliser Expo, le meilleur moyen de gérer les erreurs était celui bien connu de l'écosystème JavaScript : supprimer le node_modules et tout reconstruire à nouveau, y compris le code des natifs. Heureusement, avec Expo, nous n'avions pas besoin de gérer toutes les versions natives iOS et Android requises par React Native. Nous avions juste besoin de courir Expo Build:Android ou Expo Build:iOS pour que l'application soit opérationnelle comme prévu.
Lorsque vous écrivez du code dans un outil multiplateforme, vous pouvez partir du principe que l'application se comportera de la même manière sur les deux plateformes. Bien que cela soit vrai dans la plupart des cas, nous avons découvert certaines caractéristiques principales de notre développement qui étaient difficiles à aborder. Par exemple, le boîte-ombre et certaines bibliothèques, comme nous le mentionnerons dans la section suivante, ne fonctionnent pas comme prévu sur les appareils Android.
Si votre application nécessite des fonctionnalités natives approfondies, la plupart du temps, votre équipe devra travailler avec du code natif, comme le montre Airbnb dans leur article.
L'un des plus grands défis rencontrés lors de la création de cette application mobile était comment gérer les ressources d'image. Nous avons décidé d'utiliser le format SVG avec l'une des bibliothèques les plus utilisées, react-native-svg. Comme l'application comportait de nombreux dessins complexes, nous avons utilisé le SVG pour éviter toute perte de qualité. Il s'est avéré que la bibliothèque pour gérer le SVG ne fonctionnait pas sur Android de la même manière que sur IOS. Dans certains cas, cela ne fonctionnait pas du tout et certaines images ne s'affichaient pas après la compilation. Nous avons dû chercher une solution que nous avons trouvée dans la documentation : il fallait distribuer les images sous forme de ressources statiques et utilisez la méthode native de gestion des images. Cela signifie choisir le bon en fonction de la densité de l'écran.
Lors du développement de l'application mobile, nous avons également dû faire face à gestion des boîtes-ombres. Alors qu'IOS se comportait normalement (une page Web proposant plusieurs manières de styliser l'ombre de la boîte), Android n'avait qu'un seul accessoire. C'est ce qu'on appelle l'élévation et il n'y a qu'un seul contrôle sur la profondeur de l'ombre. Encore une fois, un autre ajustement sur les composants pour pouvoir émuler l'effet box-shadow. Ici nous avons utilisé du PNG transparent pour imiter la transparence de l'ombre de la boîte sur nos écrans.
Pour être honnête, le déploiement et le test d'applications mobiles ne sont pas des problèmes de React Native en soi. Le défi que représente l'exécution d'une application sur l'appareil mobile d'un client avant son déploiement officiel sur la plateforme est bien connu. Lors de notre développement, nous avons choisi Expo pour sa simplicité, afin de faciliter le processus. Nos parties prenantes ont installé un émulateur sur leurs machines (à la seule condition d'être un appareil macOS) et, après le sprint de développement de l'application, elles ont pu tester l'application. Pour que l'application fonctionne sur leurs appareils, nous avons dû exécuter expo build:ios -t « simulator » --release-channel staging (qui a généré un fichier .ipa prêt à être installé dans l'émulateur de périphérique) et expo build:android -t « simulator » --release-channel staging, un fichier .apk qui peut également être installé sur un émulateur ou sur un appareil réel, car Android est plus flexible en ce qui concerne les applications installées sur son système.
Expo est d'une grande aide lorsque nous avons besoin de créer des applications mobiles, car il permet de rationaliser les complexités de React Native. Malgré ses inconvénients, il facilite la création d'applications mobiles, améliorer le processus de test.
Les véritables défis commencent à apparaître lorsque votre application mobile commence à se développer et que ses fonctionnalités deviennent plus complexes. Bien que vous puissiez rencontrer certains problèmes tels que ceux que nous avons mentionnés ci-dessus, React Native est un excellent framework. En fait, cela se voit comme l'un des plus grands frameworks multiplateformes avec un formidable écosystème de bibliothèques, d'outils et, bien sûr, un géant derrière lui : Facebook.
En l'associant à Expo, nous pouvons livrer de délicieuses applications mobiles à nos clients, avec une petite équipe, en un temps record. Toutes les erreurs détectées lors de la création de cette application mobile React Native pourraient être résolues avec le temps de débogage nécessaire et l'aide de la communauté.
Développeur Javascript depuis 2016, j'ai créé des applications mobiles en utilisant Ionic et React Native. Guitariste et passionné de cuisine.
People who read this post, also found these interesting:
.webp)
.webp)
%20(2).webp)
