web-dev-qa-db-fra.com

Afficher l’écran de démarrage avant l’affichage de l’écran principal en mode natif sans utiliser de bibliothèque tierce

Je suis débutant en réaction, ma question peut sembler idiote à tous les experts.

mais je me bats avec une fonctionnalité de base que je veux implémenter, je veux démarrer mon application avec un écran de démarrage et après quelques secondes, je veux afficher l'écran de connexion ou l'écran principal.

J'ai vérifié certains exemples, mais je n'ai trouvé aucun exemple avec du code complet, donc je ne sais pas comment utiliser ces extraits de code dans mon application.

J'ai essayé d'appliquer du code selon la documentation, mais mon code donne une erreur, jetez un coup d'œil et aidez-moi.

Ci-dessous mon code:

Index.Android.js 

 
 /**
 * Exemple React Application native 
 * Https://github.com/facebook/react-native 
 * @flow 
 */
 
 importer Réagir, {Composant} de 'réagir'; 
 importer {
 AppRegistry, 
 Feuille de style, 
 Texte, 
 Afficher, 
 Navigateur 
} À partir de 'react-native'; 
 Importer Splash à partir de './Splash '; 
 import Connectez-vous à partir de' ./Login ';;. ________.____._rev
, classe d'exportation par défaut DigitalReceipt étend Component {
 render () {
 return (
 {
 if (route.sceneConfig) {
 renvoie route.sceneConfig; 
} 
 renvoie Navigator.SceneConfigs.FloatFromRight; 
 }} />
); 
} 
 renderScene (route, navigateur) {
 var routeId = route.id; 
 if (routeId = == 'Splash') {
 Return ([.___ _.] 
); 
} 
 if (routeId === 'Login') {
 return (
 
) ; 
} 
 renvoie this.noRoute (navigateur); 
 
} 
} 
 
 const styles = StyleSheet.create ({
 Conteneur: {
 Flex: 1, 
 RequireContent: 'center', 
 AlignItems: 'center', 
 BackgroundColor : '# F5FCFF', 
}, 
 Bienvenue: {
 Font Taille: 20, 
 TextAlign: 'centre', 
 Marge: 10, 
}, 
 instructions: {
 textAlign: 'center', 
 couleur: '# 333333', 
 marginBottom: 5, 
}, 
}); 
 
 AppRegistry.registerComponent ('DigitalReceipt', () => DigitalReceipt);

Splash.js 

 
 importer Réagir, {Composant} de 'réagir'; 
 importer {
 AppRegistry, 
 Afficher, 
 Texte, 
 StyleSheet, 
 Image 
} De 'react-native'; 
 Import {StackNavigator} de 'react-navigation'; 
 Import Connexion à partir de ' ./Login';

 Classe Splash étend Component {
 ComposantWillMount () {
 Var navigator = this.props.navigator; 
 SetTimeout ( () => {
 naviguer ('Login') 
}, 1000); 
} 
 
 render () {
 const {naviguer} = this.props.navigation; 
 return (
 
 
 
 Reçu numérique 
 
 
 Propulsé par React Native 
 
 
); 
} 
} 
 const SplashApp = StackNavigator ({
 Login: {screen: Login}, 
 Splash: {screen: Splash}, 
}); 
 
 Const styles = StyleSheet.create ({
 Wrapper: {
 backgroundColor: '#FFFFFF', 
 flex: 1, 
 justifierContenu: 'center', 
 alignItems: 'center' 
}, 
 titre : {
 color: '# 2ea9d3', 
 fontSize: 32, 
 fontWeight: 'bold' 
}, 
 sous-titre: {
 couleur: '# 2ea9d3', 
 fontWeight: '200', 
 paddingBottom: 20 
}, 
 titleWrapper: {
 flex : 1, 
 JustifierContenu: 'center', 
 AlignItems: 'center' 
}, 
 
 Logo: {
 largeur: 96, 
 hauteur: 96 
} 
}); 
 
 AppRegistry.registerComponent ('SplashApp', () => SplashApp);

Login.js 

 
 importer Réagir, {Composant} de 'réagir'; 
 importer {
 AppRegistry, 
 Afficher, 
 Texte, 
 StyleSheet, 
 Image 
} De 'react-native'; 
 Import {StackNavigator} de 'react-navigation'; 
 Import Splash from ' ./Splash';

 Class Login composant Component {
 Static navigationOptions = {
 Titre: 'Bienvenue', 
}; 
 render () {
 const {naviguer} = this.props.navigation; 
 return (
 
 
 Écran de connexion 
 
 
); 
} 
 
} 
 const LoginApp = StackNavigator ({
 Connexion: {screen : Login}, 
 Splash: {screen: Splash}, 
}); 
 Const styles = Feuille de style. create ({
 wrapper: {
 backgroundColor: '#FFFFFF', 
 flex: 1, 
 justifierContenu: 'center', 
 alignItems: 'center' 
}, 
 titre: {
 couleur: '# 2ea9d3', 
 fontSize: 32, 
 fontWeight: 'bold' 
} 
}); 
 AppRegistry.registerComponent ('LoginApp', () => LoginApp);

enter image description here

enter image description here

S'il vous plaît aidez-moi, désolé pour les erreurs stupides dans le code si vous en trouvez.

Merci

react-nativereact-navigation
6
Vikas Sharma

Vous pouvez essayer cet exemple. Il n’est pas nécessaire d’empiler stacknavigator dans l’écran de démarrage.

constructor(props){
    super(props);
    this.state = {
        timePassed: false,
    };
}

componentDidMount() {
    setTimeout( () => {
        this.setTimePassed();
    },1000);
}

setTimePassed() {
    this.setState({timePassed: true});
}

render() {
    if (!this.state.timePassed) {
        return <SplashScreen/>;
    } else {
        return <Login/>;
    }
}
12
Md Isfar Uddin AlNur

La bonne façon de créer un écran de démarrage consiste à modifier les itinéraires racines ..___. Vous devez d’abord créer l’image pour votre application. Vous pouvez le faire très rapidement en téléchargeant votre image sur le site https://apetools.webprofusion.com/app/#/ où il créera un fichier de paquet contenant toutes les images pour iOs, windows & Android et mettre les dans des dossiers pour chaque appareil. Vous devez copier ces dossiers sur l’itinéraire de chaque périphérique. Si vous avez déjà créé un dossier, remplacez-le . Route {device}/app/src/main/res/{folder-name}

Dans le dossier pouvant être dessiné dans route {device}/app/src/main/res/drawable, vous aurez icon.png & screen.png et vous créerez un fichier nommé 

splash_background.xmldans ce fichier, ajoutez le texte suivant

`<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
  <item>
    <bitmap
      Android:gravity="fill"
      Android:src="@drawable/screen"
    />
  </item>
</selector>`

Dans la route {device}/app/src/main/Java/com/{name-of-project} ajouter un fichier nommé SplashActivity.Java

Dans ce fichier SplashActivity.Java ajouter le suivant:

package com.prework;
import Android.content.Intent;
import Android.os.Bundle;
import Android.support.v7.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    Intent intent = new Intent(this, MainActivity.class);
    startActivity(intent);
    finish();
  }
}

Dans la route {device}/app/src/main/res/values/styles.xml changez-le comme suit:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
    </style>
    <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="Android:windowBackground">@drawable/splash_background</item>
    </style>

</resources>

Et dans la route {device}/app/src/main/res/AndroidManifest.xml changez-le comme suit

<manifest xmlns:Android="http://schemas.Android.com/apk/res/Android"
    package="com.prework">

    <uses-permission Android:name="Android.permission.INTERNET" />
    <uses-permission Android:name="Android.permission.SYSTEM_ALERT_WINDOW"/>

    <application
      Android:name=".MainApplication"
      Android:label="@string/app_name"
      Android:icon="@drawable/icon"
      Android:allowBackup="false"
      Android:theme="@style/AppTheme">

      <activity
        Android:name=".SplashActivity"
        Android:label="@string/app_name"
        Android:theme="@style/SplashTheme"
        Android:configChanges="keyboard|keyboardHidden|orientation|screenSize">

        <intent-filter>
            <action Android:name="Android.intent.action.MAIN" />
            <category Android:name="Android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>

      <activity
        Android:name=".MainActivity"
        Android:label="@string/app_name"
        Android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        Android:windowSoftInputMode="adjustResize">
      </activity>

      <activity Android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

Reconstruisez maintenant votre application en exécutant la ligne de commande react-native run-Android

1
Fernando Palma

Vous pouvez toujours le faire de manière native:

Il vous faut tout d’abord des images pour afficher votre écran de démarrage sur différents appareils:

  • LDPI:
    • Portrait: 200x320px
    • Paysage: 320x200px
  • MDPI:
    • Portrait: 320x480px
    • Paysage: 480x320px
  • HDPI:
    • Portrait: 480x800px
    • Paysage: 800x480px
  • XHDPI:
    • Portrait: 720px1280px
    • Paysage: 1280x720px
  • XXHDPI:
    • Portrait: 960px1600px
    • Paysage: 1600x960px
  • XXXHDPI:
    • Portrait: 1280px1920px
    • Paysage: 1920x1280px

Ils doivent être au format png, puis les mettre sur Android/app/src/main/res/drawable et créer un dossier nommé avec la résolution de chaque image. Ex: drawable/drawable-hdpi.

Ensuite, dans le dossier que vous pouvez dessiner, vous devez créer un fichier nommé background_splash.xml et mettre quelque chose comme ceci:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <item>
        <bitmap
            Android:gravity="fill"
            Android:src="@drawable/screen"/>
    </item>
</selector>

Après cela, vous devez ajouter un nouveau style dans Android/app/res/values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
    </style>

    <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="Android:windowBackground">@drawable/background_splash</item>
    </style>

</resources>

Mettez à jour votre fichier AndroidManifest.xml en ajoutant une nouvelle activité appelée SplashActivity et ajoutez Android:theme="@style/SplashTheme". Créez maintenant une activité vide avec le nom MainActibity. Votre AndroidManifest.xml devrait ressembler à ceci:

<manifest xmlns:Android="http://schemas.Android.com/apk/res/Android"
    package="com.exampleapp"
    Android:versionCode="1"
    Android:versionName="1.0">

    <uses-permission Android:name="Android.permission.INTERNET" />
    <uses-permission Android:name="Android.permission.SYSTEM_ALERT_WINDOW"/>

    <uses-sdk
        Android:minSdkVersion="23"
        Android:targetSdkVersion="26" />

    <application
      Android:name=".MainApplication"
      Android:allowBackup="true"
      Android:label="@string/app_name"
      Android:icon="@mipmap/ic_launcher"
      Android:theme="@style/AppTheme">
        <activity
            Android:name=".SplashActivity"
            Android:label="@string/app_name"
            Android:theme="@style/SplashTheme">
            <intent-filter>
                <action Android:name="Android.intent.action.MAIN" />
                <category Android:name="Android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity Android:name=".MainActivity" 
            Android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
            Android:windowSoftInputMode="adjustResize"
            Android:exported=”true”
        />
      <activity Android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

Nous devons maintenant dire à SplashActivity d’aller à MainActivity, qui représente notre application réelle. Pour ce faire, vous devez créer une nouvelle classe Java nommée SplashActivity.

package com.exampleapp; // change to the name of your app.

import Android.content.Intent;
import Android.os.Bundle;
import Android.support.v7.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}

Et maintenant, vous devriez voir un écran de démarrage.

https://medium.com/handlebar-labs/how-to-add-a-splash-screen-to-a-react-native-app-ios-and-Android-30a3cec835ae

1
Diego Francisco

Suivez simplement ce code simple.

App.js 

import { createStackNavigator,createAppContainer } from "react- 
navigation";
import Splash from "./Controller/Splash";
import Login from "./Controller/Login";
import Register from "./Controller/Register";

 const Navigator = createStackNavigator ({
 main: { screen: Splash },
 LoginScreen: { screen : Login },
 });

const AppNavigator = createAppContainer(Navigator);

  export default class App extends Component {
  render() {
  return <AppNavigator />;
  }
 }

Splash.js 

import React, { Component } from "react";
import {View, Text } from "react-native";

export class Splash extends Component {

 componentDidMount() {
    setTimeout(() => {
       this.load();
          }, 4000);
    }

   load = () => {
        this.props.navigation.Push("LoginScreen");
    };

    render() {
        return (
     <View >
       <Text style={styles.myText}>Splash Screen</Text>
  </View>
  );
 }
}
 export default Splash;

J'espère que cela t'aides :)

0
Chitra Nandpal