Ajout d’un écran de démarrage à une application React Native sur iOS et Android

Pour mettre une application React Native dans les stores, il faut plus que de simplement la développer. Avant la révision, des icônes, des descriptions et une page d’accueil sont nécessaires, et c’est à ce stade que le code natif entre en jeu. Les étapes ci-dessous couvrent iOS et Android dans leurs IDE respectifs, avec une petite quantité de code natif. Les instructions proviennent de l’époque de react-native-splash-screen (la version 3.0.6 et react-native link), donc les versions plus récentes de React Native peuvent gérer le lienage différemment.

Les projets créés avec Expo ou Create React Native App n’ont pas besoin de tout cela, car leur documentation traite des pages d’accueil en quelques lignes seulement.

Un projet vierge constitue un bon point de départ, par exemple react-native init SplashExample. Mettez-le sous contrôle de version avant de modifier quoi que ce soit. Cela permet de corriger facilement les erreurs et montre exactement quels fichiers sont concernés par la page d’accueil.

Conception des ressources

Une approche ancienne utilisait une seule grande image en tant qu’écran d’accueil, qui s’adaptait mal aux différentes résolutions d’écran. Une meilleure méthode part d’une image carrée simple ressemblant à l’icône de l’application, pour deux raisons.

1. Cela donne l’impression que l’icône sur laquelle vous cliquez grandit pour remplir l’écran, ce qui rend la transition plus fluide.
2. Cela reste simple. Un écran d’accueil doit être visible pendant quelques millisecondes seulement, il ne doit donc pas contenir d’informations. Après tout, c’est un écran de chargement.

Exportez l’image carrée en trois tailles : 200 px pour @1x, 400 px pour @2x et 600 px pour @3x.

Un arrière-plan qui met en évidence les flashs

Si vous avez déjà essayé d’utiliser un écran de démarrage dans React Native, vous avez probablement vu un éclair blanc apparaître avant que le contenu ne s’affiche. Sur une application avec un arrière-plan blanc, c’est difficile à remarquer, mais cela reste agaçant. Pour que tout éclair soit impossible à manquer, donnez à l’application de démonstration un arrière-plan sombre : définissez la couleur d’arrière-plan sur #4F6D7A, la couleur du texte sur #F5FCFF et changez la barre d’état en texte clair, tout cela dans App.js.

iOS

Ouvrez le projet dans Xcode :

open ios/SplashExample.xcodeproj

Tout d’abord, ajoutez un élément image. Dans le navigateur de gauche, allez sur SplashExample, puis à nouveau sur SplashExample, ensuite sur Images.xcassets, et appuyez sur le bouton plus dans la deuxième colonne du navigateur. Donnez à cet élément le nom SplashIcon. Insérez les trois images, et Xcode attribuera automatiquement chacune à la densité de pixels appropriée.

Ensuite, ouvrez LaunchScreen.xib depuis le navigateur de gauche. Il contient deux éléments de texte : le nom du projet et « Powered by React Native ». Sélectionnez-les tous les deux et supprimez-les.

Définissez l’arrière-plan de la vue. Sélectionnez « View » dans le deuxième navigateur, puis choisissez « Background » dans le panneau de droite pour ouvrir le sélecteur de couleurs. Un conseil qui demande un peu de temps à découvrir : sélectionnez la deuxième vignette du sélecteur, puis « RGB Sliders », et un champ apparaîtra où vous pourrez saisir une valeur hexadécimale. Entrez #4F6D7A.

Ajoutez maintenant une vue d’image. Ouvrez la bibliothèque d’objets (le troisième icône en bas à droite du panneau des outils), recherchez « image » et faites glisser la vue d’image sur la zone de visualisation colorée. Dans le panneau des attributs en haut à droite, choisissez SplashIcon comme image. Définissez le mode de contenu sur « Aspect Fit », qui se trouve juste en dessous en haut de ce panneau, afin que les proportions restent correctes.

Pour centrer l’icône sur n’importe quel appareil, ouvrez l’onglet de règle (la cinquième icône en haut du panneau de droite). Dans la case « Autoresizing », désactivez les lignes rouges extérieures et activez les flèches rouges intérieures. L’image restera centrée quel que soit la taille de l’écran.

Cela produit une page d’accueil, mais l’éclair blanc est toujours présent.

Pourquoi l’éclair apparaît

Lorsque l’application démarre, iOS affiche immédiatement l’écran de démarrage. Ensuite, React Native a besoin de temps pour se lancer : le JavaScript est chargé et le pont de communication est initialisé. Pendant cette période, l’écran de démarrage natif disparaît et rien n’a encore été affiché, d’où une surface blanche. La solution consiste à conserver l’écran de chargement un peu plus longtemps que la durée par défaut, jusqu’à ce que le JavaScript soit prêt. Le package react-native-splash-screen permet de faire cela.

Installez-le et reliez-le :

yarn add react-native-splash-screen@3.0.6
react-native link react-native-splash-screen

Ensuite, configurez le côté natif. Dans Xcode, ouvrez AppDelegate.m, ajoutez l’importation du fichier d’en-tête du package SplashScreen.h aux autres importations, puis appelez [SplashScreen show]; juste au-dessus de return YES; à l’intérieur de didFinishLaunchingWithOptions.

Du côté JavaScript, indiquez à l’écran de démarrage de disparaître une fois l’application prête. Appellez la méthode de masquage du package depuis componentDidMount dans App.js.

Le résultat est bon, il ne reste qu’un petit détail : la couleur de la barre d’état pendant l’affichage de l’écran de démarrage. Dans Info.plist, ajoutez une ligne avec la clé UIStatusBarStyle et la valeur de chaîne UIStatusBarStyleLightContent. Après cela, la configuration du côté iOS est terminée.

Android

Android est un peu plus complexe car deux écrans de chargement distincts sont nécessaires. L’un appartient à react-native-splash-screen, et l’autre s’affiche avant que l’application ne charge ses vues.

Actifs

Copiez les images dans les dossiers mipmap situés sous android/app/src/main/res. Android nomme ses catégories de densité différemment d’iOS, il faut donc mapper les fichiers :

• mipmap-mdpi reçoit l’image à 1x.
• mipmap-hdpi reçoit l’image à 2x.
• mipmap-xhdpi reçoit l’image à 3x.
• mipmap-xxhdpi reçoit également l’image à 3x.

Dans chaque dossier, renommez le fichier en icon.png.

L’écran de chargement au démarrage

L’écran initial apparaît lorsque l’application démarre depuis un état vierge. Cette méthode s’inspire d’un article bien connu de Big Nerd Ranch sur la façon correcte de créer des écrans de démarrage, qui explique plus en détail les raisons derrière cette approche.

1. Créez background_splash.xml dans android/app/src/main/res/drawable. Il vous faudra probablement créer le répertoire drawable. Ce fichier définit un layer-list, qui représente une pile de couches. La première couche est remplie de la couleur d’arrière-plan (définie plus loin) et la deuxième affiche l’icône, de 200dp de largeur et de hauteur, centrée.
2. Créez colors.xml dans android/app/src/main/res/values et définissez la couleur bleue, identique à celle utilisée par l’application.
3. Dans styles.xml du même dossier, définissez un SplashTheme. Il utilise background_splash comme arrière-plan de la fenêtre et le bleu pour la barre d’état, imitant ainsi autant que possible l’application réelle, y compris le changement de barre d’état. Assurez-vous également que la couleur par défaut de la barre d’état du thème est correctement définie.
4. Dans AndroidManifest.xml, faites en sorte que l’application utilise d’abord SplashTheme. À l’intérieur de <application>, enregistrez une nouvelle SplashActivity comme lanceur, et modifiez MainActivity afin qu’elle ne soit plus l’entrée du lanceur. Faites attention à android:exported="true", qui doit être défini là où c’est requis sur les versions plus récentes d’Android.
5. Créez SplashActivity.java. Sa seule fonction est de rediriger immédiatement vers MainActivity, l’application React Native réelle.

Exécutez l’application, quittez-la afin que le prochain démarrage soit un démarrage à froid, puis ouvrez-la à nouveau. L’écran d’accueil apparaît instantanément, suivi du même éclair blanc. Le corriger demande un peu plus de travail que sur iOS, mais pas beaucoup.

Retenir l’écran d’accueil jusqu’à ce que JavaScript soit prêt

Si le package n’est pas encore installé, ajoutez-le et créez un lien vers lui :

yarn add react-native-splash-screen@3.0.6
react-native link

Configurez la partie native d’Android en ajoutant l’appel d’initialisation du package dans MainActivity.java. Dans App.js, assurez-vous que l’écran de chargement se ferme dès que l’application est chargée, comme sur iOS.

Créez ensuite launch_screen.xml dans android/app/src/main/res/layout. Le nom est important, car la bibliothèque le cherche. Utilisez un LinearLayout comme élément racine. Android Studio dispose d’un éditeur visuel similaire à l’Interface Builder d’Xcode, mais modifier directement le XML est plus simple ici. Définissez la gravité du layout sur « center » et son arrière-plan en bleu, en laissant le reste aux valeurs par défaut. À l’intérieur, ajoutez un ImageView qui affichera l’icône.

Propriétés du ImageView :

• android:layout_width et android:layout_height définissent la taille, en correspondance avec celle utilisée dans background_splash.xml.
• android:layout_marginTop correspond à la hauteur de la barre d’état. Si ce paramètre n’est pas spécifié, l’icône sera placée à un endroit légèrement différent de celui de l’écran de démarrage initial, ce qui provoquera un saut visible lors du remplacement des écrans.
• android:src="@mipmap/icon" fait référence à l’image.

Enfin, colors.xml nécessite une entrée supplémentaire :

<color name="primary_dark">#4F6D7A</color>

Si on l’omet, l’application plante au démarrage. La cause réside dans un défaut au sein même de react-native-splash-screen ; une version ultérieure pourrait rendre cette étape inutile.

Lorsque ces deux éléments sont présents, l’application démarre avec un écran de chargement continu, sans scintillement, tant sur iOS que sur Android.