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

Écrit par

Carole B.

dans

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:

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é dans (créez le 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 dans en collant dans le code suivant:



#000000

iOS:

Mise à jour (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 à l’intérieur d’un crochet useEffect.

+ Plus de publications