web-dev-qa-db-de.com

So richten Sie den Begrüßungsbildschirm für reaktives Android ein

Wie kann man einen Startbildschirm für reaktives Android einstellen? Ich kann nichts zum Thema finden und dachte, es wäre seltsam. 

Vielen Dank

androidreact-native
27
Adam Katz

Ich hatte drei der folgenden Möglichkeiten ausprobiert. Das erste ist das, was ich derzeit für Android-Begrüßungsbildschirm für reaktorientierte Projekte verwende.

  1. Verwenden eines von anderen geschriebenen npm-Pakets.

    referenz: https://github.com/remobile/react-native-splashscreen

  2. Erstellen Sie eine SplashScreen-Komponente und leiten Sie sie anschließend um.

    referenz: Wie erstelle ich eine Art Splash-Bildschirm/Startbildschirm, der nach dem Laden der App nicht mehr angezeigt wird? (Native reagieren)

  3. Nativ im Java-Code.

    referenz: https://www.bignerdranch.com/blog/splash-screens-the-right-way/

Ich habe eine fetch-Anforderung in der componentDidMount() von initialRoute. 

Wenn Sie den ersten Weg aus der obigen Liste verwenden, wird die Abfrage ausgeführt, während der Begrüßungsbildschirm angezeigt wird. 

Der zweite Weg muss warten, bis die SplashScreen-Komponente ausgehängt wird.

Der dritte Weg ist etwas mehr Codes zu schreiben und zu pflegen.

28
chinloong

Dieses Tutorial funktioniert prima - ich habe es zitiert und etwas modifiziert und den react-native-background-color-Touch hinzugefügt.

https://medium.com/react-native-development/change-splash-screen-in-react-native-Android-app-74e6622d699 (das auf dieser https: //www.bignerdranch basiert .com/blog/splash-screens-the-right-way/ - dies ist native Android-Technik)

  1. Sie müssen einen Begrüßungsbildschirm in res/drawable erstellen. Nennen wir es 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. Jetzt müssen Sie res/values ​​/ styles.xml aktualisieren

    <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. Öffnen Sie nun AndroidManifest.xml und ersetzen Sie AppTheme durch SplashTheme in 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>

    Wir verwenden SplashTheme, anstatt AppTheme zu aktualisieren, um diesen Hintergrund nur hinzuzufügen, um die Aktivität zu starten und andere Dinge ohne Änderungen zu belassen.

  4. Nachdem Sie die oben genannten Schritte ausgeführt haben, werden Sie feststellen, dass der Startbildschirm immer unter Ihren js-Ansichten bleibt. Sie haben zwei Möglichkeiten, den Begrüßungsbildschirm auszublenden:

    • Verwenden Sie das reag-native-background-color-Modul unter https://github.com/ramilushev/react-native-background-color , um eine Farbe auf dem Hintergrund festzulegen, durch die das Bild entfernt wird. (Dies ist die empfohlene Methode, denn wenn die Tastatur in einigen Fällen angezeigt wird, wird die Stammansicht für einen Sekundenbruchteil sichtbar.)
    • Oder legen Sie in Ihrer Stammansicht eine durchgehende (nicht transparente) Hintergrundfarbe fest.

Beachten Sie, was "Wurzelansicht" bedeutet. Dies ist der allererste <View>, den Sie in Ihrer App rendern (dh Sie können sie formatieren).

Freiwählbare Farbe

Wenn Sie eine andere Farbe als @Android:color/*** verwenden möchten, müssen Sie colors.xml unter Android\app\src\main\res\values\colors.xml erstellen und eine Farbe wie folgt definieren:

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

Sie können einen beliebigen Namen und einen beliebigen Farbcode verwenden.

Dann zurück in splash_screen.xml aktualisieren wir <item Android:drawable="@Android:color/white" /> zu <item Android:drawable="@color/foobar" />

Zusätzliche Informationen zum Entfernen des Hintergrundbilds von hinten

Nachdem Sie so ein Splash erstellt haben. Sie werden feststellen, dass das Bild für immer im Hintergrund bleibt. Um dieses Bild zu entfernen, verwenden Sie dieses Modul - https://github.com/ramilushev/react-native-background-color - und rufen Sie BackgroundColor.setColor('#XXXXXX') mit der gewünschten Farbe auf. Das Bild wird entfernt.

Anstelle einer undurchsichtigen Farbe in der Root-Ansicht, um den Splash abzudecken, wird dennoch empfohlen, das obige Modul zu verwenden, da bei Anzeige der Tastatur die Hintergrundansicht für einen Sekundenbruchteil angezeigt wird.

7
Noitidart

Haben Sie versucht, this zu verwenden? Ich bin vor ein paar Tagen darauf gestoßen. Funktioniert gut unter iOS, aber ich habe es noch nicht auf Android getestet. (für mac: brew install imagemagic)

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

Sie müssen die Funktion nur im Begrüßungsbildschirm aufrufen.

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