Come creare una sorta di schermata Splash/schermata di avvio, che scompare dopo aver caricato l'app? (React Native)

Question

Mi chiedevo come risolvere uno schermo di avvio che, diciamo, appare per qualche secondo e poi viene sostituito dall'altra vista?

Vorrei utilizzarlo quando l'app viene avviata per la prima volta e per coprire alcune reti.

Answer 1

Ecco come ho risolto il Loading Screen. Ho lavorato con Navigator Component.

Nel mio index.android.js ho impostato la initialRoute alla mia SplashPage/SplashScreen classe e poi lì ho impostato un timeout che collega alla MainView si desidera passare a dopo un certo tempo.

My Navigator in index.android.js:

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

mio initialRoute Classe:

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

potrebbe essere più interessante perché è " nativo ";) https://github.com/crazycodeboy/react-native-splash-screen

Answer 2

This è il modo corretto.

Approfittando dell'attributo windowBackground dovrebbe evitare tutti i manufatti di interfaccia utente che si potrebbe fatte se si sta utilizzando il vecchio stile (il lancio di un'attività che corre per un periodo determinato di tempo)

Answer 3

risolto questo problema. Quindi, che cosa è necessario fare.

1) Effettuare tutto da this ma non creare SplashActivity.

2) Tutto ciò che devi fare ora è impostare il tema MainActivity su SplashTheme.

Cosa succede quando MainActivity lo carica mostrando il tema, ma dopo viene sostituito con materiale React-Native.

Answer 4

sono riuscito a fare in questo modo, che si presenta come il più semplice e ha bisogno di meno risorse:

1. creare le immagini della spruzzata per le diverse risoluzioni. Ho usato ionic resources per generare tutte le dimensioni dal file PSD. È necessario creare un progetto ionico temporaneo con ionic start, modificare i file PSD all'interno/risorse ed eseguire ionic resources.

2. inserirli nella cartella appropriata in/app/src/principali res/mipmap-xxx, con il nome ic_splash.png

3. Creare app/src/main/res/drawable/splash.xml con questo contenuto: <?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> Nota: sembra che alcune persone debbano aggiungere un colore sotto l'elemento bitmap, quindi è sufficiente aggiungere <item android:drawable="@android:color/black"/> prima del numero <item>. Il colore non ha molta importanza a meno che la tua immagine splash non abbia trasparenza.

4. Aggiungi a app/src/main/res/Valori/styles.xml: <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar"> <item name="android:windowBackground">@drawable/splash</item> </style>
5. Edit app/src/main/AndroidManifest.xml e includere all'interno dell'applicazione> attività android:theme="@style/SplashTheme"
6. Ora l'applicazione si avvierà con la schermata iniziale come sfondo, e non appena l'app React Native viene caricata, verrà posizionata su di essa. Il componente principale React Native dovrebbe avere uno sfondo in modo da coprire l'immagine splash.