¿Cómo se configura una pantalla de presentación para Android nativo de reacción? No puedo encontrar nada sobre el tema y pensé que era extraño.

Gracias

48
Adam Katz 27 ene. 2016 a las 18:41

3 respuestas

La mejor respuesta

Probé 3 de las siguientes formas. El primero es lo que estoy usando actualmente para la pantalla de presentación de Android para proyectos nativos de reacción.

  1. Usando un paquete npm escrito por otro.

    referencia: https://github.com/remobile/react-native-splashscreen

  2. Cree un componente SplashScreen y redirija después.

    referencia: ¿Cómo crear algún tipo de pantalla de bienvenida / pantalla de inicio, que desaparece después de cargar la aplicación? (Reaccionar nativo)

  3. De forma nativa en código java.

    referencia: https://www.bignerdranch.com/blog/splash- pantallas-de-la-manera-correcta /

Tengo una solicitud fetch en el componentDidMount() de initialRoute.

Usando la primera forma de la lista anterior, realiza la solicitud mientras muestra la pantalla de bienvenida.

Mientras que la segunda forma, necesita esperar hasta que el componente SplashScreen se desmonte.

La tercera forma es escribir y mantener un poco más de códigos.

33
Community 23 may. 2017 a las 12:02

¿Intentó usar esto? Me encontré con esto hace unos días. Funciona bien en iOS, pero aún no lo he probado en Android. Debería tener node & gt; = 6 e imageMagic instalados. (para mac: brew install imagemagic)

npm install -g yo generator-rn-toolbox
yo rn-toolbox:assets --splash IMGAE --android
10
Bat 13 ago. 2017 a las 09:10

Este tutorial aquí funciona muy bien: lo cité y modifiqué un poco, agregué el toque react-native-background-color.

https://medium.com / react-native-development / change-splash-screen-in-react-native-android-app-74e6622d699 (que se basa en este https://www.bignerdranch.com/blog/splash-screens-the-right-way/ - así que esto es Android nativo técnica)

  1. Necesitas crear una pantalla de bienvenida en res / drawable. Llamémoslo splash_screen.xml

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item
            android:drawable="@android:color/white"/>
    
        <item>
            <bitmap
                android:gravity="center"
                android:src="@mipmap/ic_launcher"/>
        </item>
    
    </layer-list>
    
  2. Ahora necesita actualizar 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="AppTheme">
            <item name="android:windowBackground">@drawable/splash_screen</item>
        </style>
    
    </resources>
    
  3. Ahora abra AndroidManifest.xml y reemplace AppTheme con SplashTheme en MainActivity

     <activity
            android:name=".MainActivity"
            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>
     

    Usamos SplashTheme en lugar de actualizar AppTheme, para agregar este fondo solo para iniciar la actividad y dejar otras cosas sin cambios.

  4. Después de probar lo anterior, notará que la pantalla de inicio siempre permanecerá debajo de sus vistas js. Tiene dos opciones para ocultar la pantalla de bienvenida:

    • Utilice el módulo react-native-background-color de https://github.com / ramilushev / react-native-background-color para establecer un color en el fondo que eliminará la imagen. (Esta es la forma recomendada porque cuando el teclado se muestra en algunos casos, hace que la vista raíz sea visible durante una fracción de segundo).
    • O establezca un color de fondo sólido (no transparente) en su vista raíz.
  5. Can't load full resultsTry againRetrying...Retrying...

Tenga en cuenta lo que significa "vista raíz". Esta es la primera <View> que renderizas en tu aplicación que controlas (lo que significa que puedes darle estilo).

Color personalizado

Si desea utilizar un color personalizado, que no sea @android:color/***, lo que debe hacer es crear colors.xml en android\app\src\main\res\values\colors.xml y definir colores como este:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="foobar">#ca949b</color>
</resources>

Puede usar cualquier nombre y código de color.

Luego, en splash_screen.xml, actualizamos <item android:drawable="@android:color/white" /> para que sea <item android:drawable="@color/foobar" />

Información adicional sobre cómo eliminar la imagen de bienvenida de fondo desde atrás

Después de crear un chapoteo como este. Notarás que la imagen permanece en segundo plano para siempre. Para eliminar esta imagen, utilice este módulo: https://github.com/ramilushev/react-native -background-color - y llama a BackgroundColor.setColor('#XXXXXX') con cualquier color. Eliminará la imagen.

En lugar de usar un color opaco en su vista raíz para cubrir el toque, aún se recomienda usar el módulo anterior, porque cuando se muestra el teclado, la vista de fondo se muestra por una fracción de segundo.

19
Noitidart 22 dic. 2018 a las 16:50