it-swarm.com.de

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

Ich habe mich gefragt, wie man einen Startbildschirm löst, der einige Sekunden lang erscheint und dann durch die andere Ansicht ersetzt wird.

Ich möchte dies verwenden, wenn die App zum ersten Mal gestartet wird, und um einige Netzwerke zu behandeln.

11
BigPun86

So löste ich den Loading-Bildschirm. Ich habe mit Navigator Component gearbeitet. 

In meinem index.Android.js setze ich die initialRoute auf meine Klasse SplashPage/SplashScreen und dann ein Zeitlimit, das mit dem MainView verknüpft ist, zu dem Sie nach einer bestimmten Zeit springen möchten.

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 erste Routenklasse:

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, da es "native" ist;) https://github.com/crazycodeboy/react-native-splash-screen

21
BigPun86

Dieses Problem wurde behoben. Was muss getan werden?.

1) Machen Sie alles aus this , erstellen Sie jedoch keine SplashActivity. 

2) Jetzt müssen Sie nur noch das MainActivity-Design auf SplashTheme setzen.

Wenn MainActivity geladen wird, wird das Thema angezeigt, aber danach durch React-Native-Material ersetzt.

5

Ich habe es auf diese Weise geschafft, die wie die einfachste aussieht und weniger Ressourcen benötigt:

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

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

  3. Erstellen Sie 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: Anscheinend müssen einige Benutzer unter dem Bitmap-Element eine Farbe hinzufügen. Fügen Sie also <item Android:drawable="@Android:color/black"/> vor dem obigen <item> ein. . Die Farbe spielt keine Rolle, es sei denn, Ihr Spritzerbild hat Transparenz.

  4. Fügen Sie App/src/main/res/values ​​/ styles.xml hinzu: <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar"> <item name="Android:windowBackground">@drawable/splash</item> </style>
  5. Bearbeiten Sie die App/src/main/AndroidManifest.xml und schließen Sie sie in die Anwendung ein> Aktivität Android:theme="@style/SplashTheme"
  6. Jetzt startet die App mit dem Begrüßungsbildschirm als Hintergrund. Sobald die React Native-App geladen wird, wird sie oben darauf platziert. Die Hauptkomponente von React Native sollte etwas Hintergrund haben, damit das Splash-Bild abgedeckt wird.
1
Jesús Carrera

hier ist die Lösung, Sie können den Begrüßungsbildschirm mit der Ansichtsanimation mithilfe der Bildschirmnavigation anpassen 

import React, { Component } from 'react';  import { View, Text, Animated,  
   Easing} from 'react-native';
export default class SplashPage extends Component {
    constructor() {
        super();
        this.RotateValueHolder = new Animated.Value(0);
        setTimeout(() => {
            this.props.navigation.replace('login')
        }, 5000);
    }
    componentDidMount() {
        this.StartImageRotate();
    }
    StartImageRotate() {
        this.RotateValueHolder.setValue(0);
        Animated.timing(this.RotateValueHolder, {
            toValue: 1,
            duration: 3000,
            easing: Easing.linear,
        }).start(() => this.StartImageRotate());
    }

    render() {
        const RotateImage = this.RotateValueHolder.interpolate({
            inputRange: [0, 1],
            outputRange: ['0deg', '360deg'],
        });
        return (
            <View style={{
                flex: 1, backgroundColor: 'gray', alignItems: 'center',
                justifyContent: 'center'
            }}>
                <Animated.Image
                    style={{
                        width: 250,
                        height: 250,
                        transform: [{ rotate: RotateImage }],
                    }}
                    source={{ uri:'someurl.png' }}
                />
            </View>
        );
    } }
0
civani mahida

Dies ist der richtige Weg.

Durch die Verwendung des windowBackground-Attributs sollten alle UI-Artefakte vermieden werden, die Sie bei Verwendung des alten Stils erzeugen könnten (Starten einer Aktivität, die für einen bestimmten Zeitraum ausgeführt wird). 

0
Simone Leoni