web-dev-qa-db-fra.com

Comment créer une sorte d'écran de démarrage/écran de démarrage, qui disparaît après le chargement de l'application? (Réagir natif)

Je me demandais comment résoudre un écran de lancement qui, disons, apparaît pendant quelques secondes puis est remplacé par l’autre vue?

Je voudrais l'utiliser lorsque l'application est lancée pour la première fois et pour couvrir certains réseaux.

androidiosreact-native
11
BigPun86

Voici comment j'ai résolu le Écran de chargement. J'ai travaillé avec Navigator Component. 

Dans mon index.Android.js, j'ai défini la initialRoute dans ma classe SplashPage/SplashScreen, puis un délai d'attente qui renvoie au MainView auquel vous souhaitez accéder après un certain temps.

Mon navigateur dans index.Android.js: 

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

Ma classe initialeRoute:

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;

MODIFIER

Peut-être plus intéressant parce que c'est "natif";) https://github.com/crazycodeboy/react-native-splash-screen

21
BigPun86

Correction de ce problème . Alors que faut-il faire.

1) Faites tout de ceci mais ne créez pas SplashActivity. 

2) Tout ce que vous devez faire maintenant est de définir votre thème MainActivity sur SplashTheme.

C'est ce que MainActivity charge en affichant son thème, mais après l'avoir remplacé par des éléments React-Native.

5
Andrey Nikishaev

voici la solution, vous pouvez personnaliser Splashscreen avec une animation de vue à l'aide de la navigation à l'écran 

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

Ceci est la bonne façon.

Profiter de l'attribut windowBackground devrait éviter tous les artefacts d'interface utilisateur que vous pouviez créer si vous utilisiez l'ancien style (lancement d'une activité qui s'exécute pendant une durée déterminée). 

0
Simone Leoni