Wie erstellen Sie eine Art von Splash-screen/Start-Bildschirm, die verschwindet nach der App geladen? (Reagieren Native)

Dies ist, wie ich das gelöst Ladebildschirm. Ich arbeitete mit der Navigator Komponente.

In meinem index.android.js ich die initialRoute zu meinem SplashPage/SplashScreen Klasse und dann in es ich ein timeout, die links zu den MainView Sie wollen, um zu springen, um nach einer gewissen Zeit.

Mein Navigator in index.android.js:

<Navigator
   initialRoute={{id: 'SplashPage'}}
   renderScene={this.renderScene}
   configureScene={(route) => {
       if (route.sceneConfig) {
           return route.sceneConfig;
       }
       return Navigator.SceneConfigs.HorizontalSwipeJump;
   }}
/>

Meine initialRoute Klasse:

class SplashPage extends Component {

    componentWillMount () {
        var navigator = this.props.navigator;
        setTimeout (() => {
            navigator.replace({
                id: 'MainView', <-- This is the View you go to
            });
        }, 2000); <-- Time until it jumps to "MainView" 
    }
    render () {
        return (
            <View style={{flex: 1, backgroundColor: 'red', alignItems: 'center', justifyContent: 'center'}}>
                <Image style={{position: 'absolute', left: 0, top: 0, width: windowSize.width, height: windowSize.height}} source={require('image!splash_screen')}></Image>
            </View>
        );
    }
}

module.exports = SplashPage;

BEARBEITEN

Könnte interessanter sein, weil es "native" 😉
https://github.com/crazycodeboy/react-native-splash-screen

InformationsquelleAutor BigPun86

Habe ich es geschafft, es zu tun auf diese Weise, die aussieht wie die einfachste und braucht weniger Ressourcen:

1. Erstellen Sie die splash-Bilder für die verschiedenen Auflösungen. Ich verwendet ionic-Ressourcen zu generieren, die Größen aus der PSD-Datei. Sie müssen zum erstellen einer temporären ionic-Projekt mit ionic start Bearbeiten Sie die PSD-Dateien in /Ressourcen, und führen Sie ionic resources.

2. Legen Sie Sie in den entsprechenden Ordner im app/src/main/res/mipmap-xxx, mit dem Namen ic_splash.png

3. Erstellen app/src/main/res/drawable/splash.xml mit diesem Inhalt:
   
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap
android:gravity="center"
android:src="@mipmap/ic_splash"/>
</item>
</layer-list>

   Hinweis: Sieht aus wie einige Leute es braucht um eine Farbe hinzuzufügen, die unterhalb der bitmap-Element, so dass Sie nur hinzufügen <item android:drawable="@android:color/black"/> vor der oben genannten <item>. Die Farbe ist eigentlich egal, es sei denn, Ihr splash-Bild hat Transparenz.

4. Hinzufügen app/src/main/res/values/styles.xml:
   
<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">@drawable/splash</item>
</style>

5. Bearbeiten app/src/main/AndroidManifest.xml und legen Sie in der Anwendung>Aktivität android:theme="@style/SplashTheme"
6. Nun die app startet mit der splash-Bildschirm als hintergrund, und sobald die Reagieren Native app lädt, wird oben drauf. Die Reagieren Nativen wichtigste Komponente soll einige hintergrund, damit der splash-Bildes wird abgedeckt.

InformationsquelleAutor Jesús Carrera