Muestre la pantalla de bienvenida antes de mostrar la pantalla principal en react native sin usar una biblioteca de terceros

Sé libre de divulgar nuestros post y códigos con otro, necesitamos de tu ayuda para hacer crecer nuestra comunidad.

Solución:

Puede probar este ejemplo. No hay necesidad de un navegador de pila en la pantalla de inicio.

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


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


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


render() 
    if (!this.state.timePassed) 
        return ;
     else 
        return ;
    

Siempre puedes hacerlo de forma nativa:

Primero, necesita imágenes para mostrar su pantalla de bienvenida en diferentes dispositivos:

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

Ellos necesitan ser png formato, luego póngalos en android/app/src/main/res/drawable y crea una carpeta nombrada con la resolución de cada imagen. Ex: drawable/drawable-hdpi.

Luego, en la carpeta dibujable, debe crear un archivo llamado background_splash.xml y pon algo como esto:

Después de eso, debe agregar un nuevo estilo en android/app/res/values/styles.xml

Actualiza tu AndroidManifest.xml archivo agregando una nueva actividad llamada SplashActivity y añadir android:theme="@style/SplashTheme". Ahora crea una actividad vacía con el nombre MainActibity. Tu AndroidManifest.xml debería verse algo como esto:

Ahora necesitamos decirle a SplashActivity que vaya a MainActivity, que representa nuestra aplicación real. Para hacer eso, necesita crear una nueva clase Java llamada 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();
    

Y ahora debería ver una pantalla de bienvenida.

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

La forma correcta de hacer que una pantalla de bienvenida reaccione es modificar las rutas raíz. Primero necesitas crear la imagen para tu aplicación. Puede hacer esto realmente rápido cargando su imagen en el sitio https://apetools.webprofusion.com/app/#/ donde creará un archivo de paquete con todas las imágenes para iOs, windows y android y las pondrá en carpetas para cada dispositivo. Debe copiar esas carpetas a la ruta de cada dispositivo, en caso de que haya creado alguna carpeta, reemplácela. Ruta
device/app/src/main/res/folder-name

En la carpeta dibujable en ruta device/app/src/main/res/drawable tendras icon.png Y screen.png y crea un archivo llamado

splash_background.xml

en este archivo agregue el siguiente texto

En la ruta device/app/src/main/java/com/name-of-project agregar un archivo llamado SplashActivity.java

En este archivo SplashActivity.java agregue el siguiente:

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();
  

En la ruta device/app/src/main/res/values/styles.xml cámbielo de la siguiente manera:

Y en la ruta device/app/src/main/res/AndroidManifest.xml cámbialo de la siguiente manera

Ahora reconstruya su aplicación ejecutándola en la línea de comandos react-native run-android

Comentarios y puntuaciones

Nos puedes añadir valor a nuestra información asistiendo con tu veteranía en las ilustraciones.

---

---

Utiliza Nuestro Buscador