8,515 lectures

Comment ajouter des icônes et un écran de démarrage dans React Native (sans bibliothèque)

par Lucas Leonardo7m2023/03/15

Trop long; Pour lire

Ce tutoriel a été créé avec l'application créée à l'aide de create-react-app. Pour travailler avec l'environnement d'Apple, nous avons besoin d'un macOS. Pour cela, nous aurons besoin d'icônes de différentes tailles ainsi que d'une version ronde des icônes (sans fond). Veuillez également noter que si vous n'avez pas ces tailles, nous avons un guide étape par étape sur la façon de les configurer.

featured image - Comment ajouter des icônes et un écran de démarrage dans React Native (sans bibliothèque)

Aujourd'hui, j'ai relevé le défi suivant lors de mon stage : modifier/implémenter un écran de démarrage et une icône pour le projet sur lequel je travaille.

Cependant, j'ai préféré le faire en natif pour ne pas être dépendant de librairies tierces. J'ai réservé du temps pour faire le pic (étude) sur la façon dont cela fonctionne, où je devrais apporter des modifications et à quoi cela s'appliquerait. Après avoir fait le pic, j'ai compris que je devais le faire séparément pour iOS et Android.

Parlons d'abord d'iOS !

Remarque : Ce didacticiel a été créé avec l'application créée à l'aide de create-react-app.

iOS

Tout d'abord, nous devons nous rappeler que pour travailler avec l'environnement d'Apple, nous avons besoin d'un macOS. Maintenant que le projet est déjà créé, allons dans le dossier 'ios' et ouvrons-le dans Xcode .

Après cela, nous allons dans le dossier avec le nom de notre projet, en suivant l'exemple fictif ci-dessous :
Maintenant, nous allons aller dans le fichier 'Images', où nous aurons les options de taille. Faites simplement glisser les images correspondantes pour chaque dimension et également une pour être l'icône de l'application à utiliser dans l'écran de démarrage (si vous ne savez pas comment formater vos images pour répondre aux normes, à la fin de l'article, nous aurons un bref tutoriel sur la façon de le faire).
À ce stade, nous avons déjà terminé la configuration des icônes et nous passons maintenant à l'écran de démarrage. Pour cette étape, j'utiliserai un arrière-plan uni et une image au centre comme exemple, mais vous pouvez l'éditer au fur et à mesure que votre design a été créé (ou comme vous l'avez imaginé lol).

Tout d'abord, nous allons ouvrir le fichier 'LaunchScreen' dans Xcode. Dans ce fichier, nous naviguerons dans l'ordre suivant : 'View Controller Scene' → 'View Controller' → 'View' .

Dans ce domaine, nous avons la zone de sécurité, qui n'est rien de plus que l'espace utile sur l'écran.

Par défaut, il contient déjà le nom que vous avez donné à l'application lors de sa création et un pied de page "Powered by React Native". Dans ce cas, nous supprimerons le pied de page et le nom de l'application. Après cela, nous allons cliquer sur le '+' dans le coin supérieur droit et accéder à l'option 'Image View' et la faire glisser vers l'application, l'aligner au milieu et ajuster la réactivité.
Maintenant que nous avons tout ajusté, fermez simplement Xcode et créez votre application. Votre application sera entièrement configurée

(Remarque : si vous l'aviez déjà exécuté sur votre téléphone ou votre émulateur auparavant, n'oubliez pas de supprimer l'application pour que les changements d'icônes soient appliqués) !

Android

Passons maintenant à la configuration Android. Pour cela, nous aurons besoin d'icônes de différentes tailles ainsi que d'une version ronde des icônes (sans fond). Veuillez également noter que si vous n'avez pas ces tailles, nous avons un guide étape par étape à la fin de l'article sur la façon de le configurer. Un peu différent de ce que nous faisions sur iOS, j'ai choisi ici de ne pas utiliser Android Studio et de modifier directement le code car je ne trouvais pas son menu de mise en forme très intéressant !
Avec les images déjà enregistrées sur votre appareil, nous allons ouvrir le dossier de l'application dans le gestionnaire de fichiers → android → app → src → main → res. Dans le dossier "res", nous avons le dossier "drawable" et d'autres dossiers "mipmap-suffix" .

Le dossier "drawable" est l'endroit où nous allons configurer notre splash et avoir l'icône principale, tandis que les dossiers "mipmap" sont responsables des différentes tailles d'icônes et des icônes rondes. La première chose que nous ferons est de remplacer les fichiers d'icônes par les nôtres. Je recommande d'utiliser les mêmes noms que ceux déjà présents afin que vous n'ayez pas encore à modifier le code natif, comme indiqué ci-dessous :

Maintenant que nous avons apporté des modifications tout au long de notre application, nous allons passer à la partie native ! Dans le dossier drawable, nous avons le fichier "rn_edit_text_material.xml" et nous y ferons quelques configurations.

Pour rendre votre écriture moins verbeuse, je vais laisser les configurations que j'ai utilisées pour que vous puissiez simplement les copier et les coller dans votre code avec une explication de chaque changement : Nous avons ajouté la balise <layer-list> pour diriger les schémas du projet , et à l'intérieur, nous avons passé ce que nous voulons utiliser.

Dans ce cas, j'ai utilisé la balise <item android: drawable="@color/primary" /> pour définir la couleur de fond (nous la configurerons à l'étape suivante), et la dernière balise avec l' item android: préfixe à définir les dimensions, quelle image utiliser et son positionnement sur l'écran de l'appareil.

 <?xml version="1.0" encoding="utf-8"?> <!-- Copyright (C) 2014 The Android Open Source Project Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!-- This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I). The item below with state_pressed="false" and state_focused="false" causes a NullPointerException. NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/> For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR. --> <item android:drawable="@color/primary" /> <item android:width="100dp" android:height="100dp" android:drawable="@drawable/icon" android:gravity="center" /> </layer-list>

Nous allons maintenant configurer notre backgroundColor, pour cela nous allons naviguer vers le dossier "res" et créer un fichier appelé "colors.xml" dans le dossier "values". Nous allons ajouter le code ci-dessous, qui contient une balise <resources> avec notre balise de couleur de fond, déjà avec le même nom que nous avons donné à l'étape précédente.
```
 <?xml version="1.0" encoding="utf-8" ?> <resources> <color name="primary">#f2f2f2</color> </resources>
```

"styles.xml" est un fichier dans le dossier "values", où nous modifierons la ligne suivante qui vient par défaut lors de la création de l'application :
```
 <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
```
à ce code :
```
 <item name="android:windowBackground"> @drawable/rn_edit_text_material </item> <item name="android:statusBarColor"> @color/primary </item>
```
Dans l'extrait de code mentionné ci-dessus, nous définissons à quelle fenêtre appartient l'arrière-plan en haut, et en bas, nous définissons la couleur (définie précédemment). Bon travail! Votre application Android devrait être configurée avec le nouvel écran de démarrage et les icônes. N'oubliez pas de le tester soigneusement avant de le publier sur l'App Store. Bonne chance avec votre application !

Création d'icônes dans les tailles souhaitées.

Pour créer nos icônes aux tailles exactes, nous allons utiliser 2 outils, le premier s'appelle #Figma ( https://www.figma.com/ ) et le second est un site Web appelé #ApeTools ( https://apetools.webprofusion.com/#/tools/imagegorilla ). Dans ApeTools, nous téléchargeons notre image et la formatons dans la taille standard iOS ou Android. Dans Figma, nous allons télécharger nos images Android et leur ajouter un borderRadius pour les arrondir.

ApeTools :
Pour l'utiliser, nous allons cliquer sur l'option "choisir le fichier", sélectionner le Logo puis sélectionner la base Android et iOS, après cela il suffit de cliquer sur Kapow ! et le site affichera automatiquement nos icônes.
Figue :
Remarque : Cette étape concerne uniquement la configuration de l'icône Android.

Nous allons ouvrir le site Web ou l'application #Figma, télécharger les images que nous voulons arrondir et dans le menu de droite, dans l'option courbe, nous mettrons '100' pour obtenir un cercle parfait (dans l'exemple ci-dessous j'ai fait avec une seule image pour illustration, mais cela devrait être fait dans toutes les images du "@mipmap" et j'ai également utilisé un borderRadius plus grand car mon exemple d'image était trop grand).