La façon la plus simple d’ajouter un écran Splash à votre application React-Native !!

Maintenant, pour ceux d’entre nous qui ont construit l’application avec le bon vieux init natif réactif, l’ajout d’un écran de démarrage comprend les 4 étapes suivantes:

Étape 0: Préparez l’image de démarrage!

Je sais, c’est une évidence. Mais bon, avez-vous exactement l’image de démarrage en 6 dimensions différentes? Oui? Veuillez ensuite passer à l’étape suivante. Non? Et bien devinez quoi, vous avez en fait besoin de la même image en 6 dimensions! Alors, comment allez-vous vous débrouiller avec une seule image si c’est tout ce que vous avez?

Ne vous embêtez pas à aller dans Photoshop et à redimensionner, voici un outil génial J’ai trouvé que le processus de génération d’images de démarrage était un jeu d’enfant.

Allez à cette site, ajoutez votre image de démarrage (de préférence avec la meilleure qualité possible), choisissez la plate-forme requise (andoid et / ou ios) et appuyez sur le bouton Kapow). L’outil générera un fichier zip de l’écran de démarrage dans différentes dimensions de pixels.

Extrayez-le et copiez tout le contenu du dossier android / ou ios du bundle dans votre dossier android / app / src / main / res.

Cela rendra tout le processus très simple

npm i react-native-splash-screen

ou

fil ajouter écran de démarrage natif réactif

Remarque: si votre version de cli native est inférieure à 0,6, n’oubliez pas de lier le package ci-dessus en utilisant: react-native link react-native-splash-screen

Android:

Vous devez mettre à jour le MainActivity.java (situé dans le dossier android / app / src / main / java / com / your_project_name) afin d’utiliser react-native-splash-screen dans votre projet. Modifiez simplement le fichier comme indiqué ci-dessous:

import android.os.Bundle;import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen;public class MainActivity extends ReactActivity {@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this); 
super.onCreate(savedInstanceState);
}
// ...other code
}

Maintenant, créez un fichier appelé launch_screen.xml dans app/src/main/res/layout (créez le layout dossier s’il n’existe pas). Le contenu du fichier doit être le suivant:

android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">

Maintenant, nous devons ajouter une couleur appelée primary_dark dans app/src/main/res/values/colors.xml(create if it doesn't exist already)en collant dans le code suivant:

#000000

iOS:

Mise à jour AppDelegate.m (situé à ios / splashapp) avec les ajouts suivants:

#import "AppDelegate.h"#import #import #import "RNSplashScreen.h"@implementation AppDelegate- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{// ...other code[RNSplashScreen show];// or//[RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView];return YES;}@end

À présent, si vous exécutez votre application, vous pourrez voir l’image de démarrage couvrir tout l’écran (comme il se doit) et s’afficher pour toujours (comme elle ne devrait pas). Fondamentalement, il ne se fermerait jamais, et il y a même une chance que votre application se bloque après quelques secondes de l’image affichée comme ceci.

Maintenant, quand faut-il fermer l’écran de démarrage? Peut-être lorsque le fichier d’entrée principal de votre application est exécuté? Oui! Modifions donc simplement App.js pour que, lorsque les fichiers du projet finissent de se charger et soient prêts à être exécutés, l’écran de démarrage cède la place à votre écran principal / principal.

// make following changes to App.js
import SplashScreen from 'react-native-splash-screen'export default class App extends Component {
componentDidMount() {
// do stuff while splash screen is shown
// After having done stuff (such as async tasks) hide the splash   
// screen
   SplashScreen.hide();
}
}

Si vous utilisez des composants fonctionnels, appelez simplement SplashScreen.hide() à l’intérieur d’un crochet useEffect.