Comment ajouter un écran de démarrage pour réagir nativement (Android)

https://medium.com/@rocksinghajay

Dans mon article précédent, j’avais expliqué comment ajouter un écran de démarrage pour réagir nativement (IOS).

Maintenant, dans cet article, je vais vous dire comment nous pouvons ajouter un splash pour réagir natif (Android). Je vais vous dire des étapes très simples. Et c’est une première chose que nous pouvons créer pour chaque application mobile. C’est donc une chose très importante pour tous les développeurs car ils savent comment l’ajouter correctement.

Vous pouvez voir le code source complet ici:

J'utilise un simple projet natif de réaction pour l'ajout de l'écran de démarrage. Commençons donc par initialiser le projet natif de réaction dans votre système.

Réactif natif init SplashScreenReactNative
cd SplashScreenReactNative

Après avoir exécuté ces deux lignes dans le terminal, vous devrez réagir au projet natif sur votre système.

Si vous avez remarqué que les applications natives réagissent, vous avez un écran de démarrage à fond blanc. Sur cet écran, nous ajoutons notre écran de démarrage personnalisé. Comment remarquer ce premier écran de démarrage blanc, nous devons d'abord définir une couleur d'arrière-plan sombre dans notre application.

Remplacez votre composant App.js par le code ci-dessous

Il vous suffit de remplacer la couleur de fond par le rouge foncé et la couleur du texte en blanc.

Ajouter l'écran de démarrage à l'application Android

Commencez par ouvrir votre projet dans le studio Android.

Après avoir ouvert le projet sur Android studio, vous accédez au dossier mipmap situé dans le dossier android / app / src / main / res. Chaque densité de pixels est associée à une densité différente du nom du dossier que vous pouvez trouver dans la capture d'écran ci-dessous. .

android / app / src / main / res

Et c’est l’endroit où toutes les images doivent aller selon son dossier de densité de pixels mipmap

Vous pouvez créer votre icône ici Android Asset Studio, qui vous fournira toutes les images du dossier mipmap.

Et copier que toutes les images en fonction de son dossier mipmap.

icon.png

Dans l'étape suivante, nous allons créer l'écran de démarrage qui s'affiche lors du premier lancement de l'application.

  1. Créez un fichier background_splash.xml dans android / app / src / main / res / drawable, vous pouvez créer un dossier pouvant être dessiné en premier dans le dossier res.

Et le code suivant:

drawable / background_splash.xml

2. Dans la suite, nous allons créer un fichier colors.xml dans l'androïde / app / src / main / res / values, dans lequel nous définirons notre couleur rouge, identique à celle de notre application.

Et le code suivant:

android / app / src / main / res / values ​​/ colors.xml

Ouvrez ensuite un fichier styles.xml dans android / app / src / main / res / values ​​/ styles.xml et ajoutez le code suivant:

3. Dans les étapes suivantes, nous allons dire que notre application démarre initialement SplashTheme. Et nous le ferons dans le fichier AndroidManifest.xml et à l'intérieur de

Ajoutez le code suivant:

Et modifiez le MainActivity comme suit. Ajouter android: exports = "true" et commenter la

Et notre fichier final AndroidManifest.xml se présente comme suit:

4. Dans l'étape suivante, nous créons un fichier SplashActivity.java dans android / app / src / main / java / com / SplashActivity.java.

SplashActivity.java

Maintenant, lancez votre application et voyez si tout fonctionne bien ou pas.

écran de démarrage

Et cela fonctionne bien, mais il y a un problème après le chargement de l'écran de démarrage. Il peut être corrigé en ajoutant un module d'écran de démarrage-écran-réactif pour réagir à l'application native.

fils ajouter [email protected]
lien réactif natif

Ensuite, configurez App.js dans votre application.

J'espère que vous avez apprécié cet article sur Comment ajouter un écran de démarrage pour réagir en natif (ANDROID).

Clap pour cet article si vous le trouvez utile

N'hésitez pas à commenter et à aimer cet article afin que d'autres puissent le trouver facilement sur Medium!

Bonjour, je m'appelle Ajay Singh Rajput. Je suis un développeur frontend chez ZestGeek. J'écris sur JavaScript et réagis. Et partager ma vision du monde avec tout le monde rejoint ma quête en me suivant sur Twitter ou Medium.

Vous voulez en savoir plus sur JavaScript, Reactjs et Life? Découvrez mes autres articles:

Et merci d'avoir lu cet article si vous l'aimez, puis partagez-le avec vos amis et vos ennemis. Et j'écrirai davantage sur JavaScript, réagit.js, restez connecté avec moi.