web-dev-qa-db-fra.com

Comment configurer l'écran de démarrage pour réagir-native Android

Comment définir un écran de démarrage pour Android natif, je ne trouve rien sur le sujet et j’ai trouvé cela étrange 

Merci

androidreact-native
27
Adam Katz

J'avais essayé 3 des manières suivantes. Le premier est ce que j'utilise actuellement pour l'écran de démarrage Android pour les projets réactifs natifs.

  1. Utiliser un paquet npm écrit par other.

    référence: https://github.com/remobile/react-native-splashscreen

  2. Créez un composant SplashScreen et redirigez ensuite.

    référence: Comment créer une sorte d'écran Splash/écran de lancement, qui disparaît après le chargement de l'application? (React Native)

  3. Nativement dans le code Java.

    référence: https://www.bignerdranch.com/blog/splash-screens-the-right-way/

J'ai une demande fetch dans le componentDidMount() de initialRoute. 

L'utilisation de la première manière de la liste ci-dessus exécute la demande tout en affichant l'écran de démarrage. 

Alors que la deuxième façon, doit attendre que la composante SplashScreen soit démontée.

La troisième façon est légèrement plus de codes à écrire et à maintenir.

28
chinloong

Ce tutoriel ici fonctionne très bien - je l'ai cité et modifié un peu, j'ai ajouté la touche react-native-background-color.

https://medium.com/react-native-development/change-splash-screen-in-react-native-Android-app-74e6622d699 (basé sur ceci https: //www.bignerdran .com/blog/splash-screens-the-right-way/ - il s'agit donc d'une technique Android native)

  1. Vous devez créer un écran de démarrage dans res/drawable. Appelons-le splash_screen.xml

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <item
        Android:drawable="@Android:color/white"/>

    <item>
        <bitmap
            Android:gravity="center"
            Android:src="@mipmap/ic_launcher"/>
    </item>

</layer-list>

  2. Maintenant, vous devez mettre à jour res/values ​​/ styles.xml

    <resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
    </style>

<style name="SplashTheme" parent="AppTheme">
        <item name="Android:windowBackground">@drawable/splash_screen</item>
    </style>

</resources>

  3. Ouvrez maintenant AndroidManifest.xml et remplacez AppTheme par SplashTheme dans MainActivity.

    <activity
        Android:name=".MainActivity"
        Android:label="@string/app_name"
        Android:theme="@style/SplashTheme"
    Android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
        <intent-filter>
            <action Android:name="Android.intent.action.MAIN" />
            <category Android:name="Android.intent.category.LAUNCHER" />
        </intent-filter>
</activity>

    Nous utilisons SplashTheme au lieu de mettre à jour AppTheme, pour ajouter cet arrière-plan uniquement pour démarrer une activité et laisser les autres éléments sans modifications.

  4. Après avoir essayé ce qui précède, vous remarquerez que l’écran de démarrage restera toujours sous vos vues js. Vous avez deux options pour masquer l'écran de démarrage:

    • Utilisez le module react-native-background-color de https://github.com/ramilushev/react-native-background-color pour définir une couleur sur l’arrière-plan qui supprimera l’image. (Cette méthode est recommandée car, dans certains cas, lorsque le clavier est affiché, la vue racine est visible pendant une fraction de seconde.)
    • Vous pouvez également définir une couleur d'arrière-plan unie (non transparente) dans la vue racine.

Note sur ce que "vue racine" signifie. Il s'agit du tout premier <View> que vous avez rendu dans votre application que vous contrôlez (ce qui signifie que vous pouvez l'appeler).

Couleur personnalisée

Si vous souhaitez utiliser une couleur personnalisée autre que @Android:color/***, vous devez créer colors.xml à Android\app\src\main\res\values\colors.xml et définir une couleur comme celle-ci:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="foobar">#ca949b</color>
</resources>

Vous pouvez utiliser n'importe quel nom et code de couleur.

Puis, dans splash_screen.xml, nous mettons à jour <item Android:drawable="@Android:color/white" /> pour devenir <item Android:drawable="@color/foobar" />

Informations supplémentaires sur la suppression de l'image de fond de l'arrière-plan

Après avoir créé une éclaboussure comme celle-ci. Vous remarquerez que l'image reste en arrière-plan pour toujours. Pour supprimer cette image, utilisez ce module - https://github.com/ramilushev/react-native-background-color - et appelez BackgroundColor.setColor('#XXXXXX') avec n’importe quelle couleur. Cela enlèvera l'image.

Au lieu d'utiliser une couleur opaque sur la vue racine pour couvrir les éclaboussures, il est toujours recommandé d'utiliser le module ci-dessus, car lorsque le clavier s'affiche, la vue d'arrière-plan s'affiche pendant une fraction de seconde.

7
Noitidart

Avez-vous essayé d'utiliser ceci ? Je suis tombé sur cela il y a quelques jours. Fonctionne bien sur iOS mais je ne l’ai pas encore testé sur Android . Vous devez avoir le noeud> = 6 et l’imageMagic installés. (pour mac: brew install imagemagic)

npm install -g yo generator-rn-toolbox
yo rn-toolbox:assets --splash IMGAE --Android
6
Bat

Tout ce que vous avez à faire est d’appeler la fonction dans l’écran de démarrage.

componentWillMount() {
    setTimeout(() => {
        this.props.navigation.navigate('Login')
    }, 1000);
}
0
Zuhad