Wie erstelle ich eine Art Begrüßungsbildschirm/Startbildschirm, der nach dem Laden der App verschwindet? (Reaction Native)

Question

Ich frage mich, wie man einen Startbildschirm löst, der, sagen wir mal, für einige Sekunden erscheint und dann durch den anderen View ersetzt wird?

Ich möchte dies verwenden, wenn die App das erste Mal gestartet wird und einige Netzwerkings abdecken.

Answer 1

Dies ist, wie ich das gelöst Ladebildschirm. Ich habe mit Navigator Component gearbeitet.

In meinem index.android.js stelle ich die initialRoute meiner SplashPage/Splashscreen Klasse und dann dort setze ich ein Timeout, das auf die Mainview verbindet Sie nach einer gewissen Zeit springen wollen.

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; 

EDIT

könnte interessanter sein, weil es " nativ ";)

Answer 2

This ist der richtige Weg.

Unter Ausnutzung der windowBackground Attribut sollte alle UI-Artefakte vermeiden, die Sie machen können, wenn Sie den alten Stil verwendet haben (eine Aktivität gestartet, die für eine bestimmte Menge an Zeit läuft)

Answer 3

Dieses Problem wurde behoben. Also was muss getan werden.

1) Machen Sie alle von this, aber erstellen Sie keine SplashActivity.

2) Alles, was Sie jetzt tun müssen, ist, MainActivity Theme auf SplashTheme zu setzen.

Thing in, wenn MainActivity laden es zeigt das Thema, aber nachdem es mit React-Native Zeug ersetzt.

Answer 4

schaffte ich es auf diese Weise zu tun, die wie die einfachste aussieht und benötigen weniger Ressourcen:

1. die Spritzbilder für die unterschiedlichen Auflösungen erstellen. Ich habe ionic resources verwendet, um alle Größen aus der PSD-Datei zu generieren. Sie müssen ein temporäres Ionenprojekt mit ionic start erstellen, die PSD-Dateien in/resources bearbeiten und ionic resources ausführen.

2. Platz sie in den entsprechenden Ordnern in app/src/main/res/Mipmap-xxx, mit dem Namen ic_splash.png

3. app erstellen/src/main/res/ziehbar/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: Es sieht so aus, als müssten einige Personen eine Farbe unterhalb des Bitmap-Elements hinzufügen. Fügen Sie einfach <item android:drawable="@android:color/black"/> vor dem obigen <item> hinzu. Die Farbe spielt keine Rolle, es sei denn, Ihr Splash-Bild ist transparent.

4. In den app/src/main/res/Werte/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 umfassen Innenanwendung> Aktivität android:theme="@style/SplashTheme"
6. Jetzt wird die App starten Mit dem Begrüßungsbildschirm als Hintergrund und sobald die App "React Native" geladen wird, wird sie darüber platziert. Die Hauptkomponente "React Native" sollte Hintergrundinformationen enthalten, damit das Splash-Image abgedeckt wird.