Pantalla de presentación de React Native: soporte para diferentes temas / Sudo Null IT News
¡Hola a todos! El equipo dev.family está en contacto. En este artículo, compartimos una breve guía sobre cómo instalar Splash Screen en una aplicación multiplataforma escrita en React Native con soporte para múltiples temas.
La pantalla de presentación es la primera pantalla que ven los usuarios antes de cargar la aplicación principal. Esta pantalla es quizás la mejor manera de hacer que el nombre de su aplicación y, en general, su nombre completo, sea más memorable.
Pero esta no es la función principal de la pantalla de presentación. Debajo, por ejemplo, puede ocultar la recepción de datos de la API y la carga de la aplicación principal. Hacemos esto cuando mostramos el cargador en la pantalla al cargar los mismos datos. Esto le permite mejorar la UX y demostrar inmediatamente la aplicación terminada al usuario. Y como resultado, retire el cargador adicional al abrirlo por primera vez.
En esta breve guía veremos cómo instalar pantallas de presentación para iOS y Android usando el marco reaccionar-nativo usando la biblioteca reaccionar-pantalla-de-presentación-nativa.
Instrucciones paso a paso
Trabajo preparatorio
Primero necesitas instalar la biblioteca en el proyecto:
yarn add react-native-splash-screenDespués de esto, en la carpeta ios necesitas ejecutar el comando para instalar los pods:
cd ios && pod install && cd ..(vaya al directorio ios, instale pods y regrese)
A continuación, existen dos opciones de configuración:
Utilice para la pantalla de presentación una imagen exportada, por ejemplo, de la misma Figma
Hacer esta pantalla a mano es más difícil y lleva más tiempo.
Primero miremos la pantalla en sí.
Digamos que elegimos la opción cuando se usa una imagen. Lo exportamos en alta resolución (en nuestro caso x3). Pero, dado que estamos haciendo todo para dos temas a la vez, necesitamos exportar ambas copias (para claro y oscuro). Luego, vaya a AppIcon y arrastre primero una imagen y luego otra.
Luego haga clic en Generar, descargue los activos y colóquelos en la carpeta activos en la raíz del proyecto.
Ahora que los preparativos generales están completos, procedamos directamente a la instalación en la aplicación móvil. Comencemos con iOS.
Configuración de la pantalla de bienvenida de IOS
En primer lugar, abra el .xcworkspace de nuestro proyecto. Allí vemos un AppIcon vacío (si no ha agregado un ícono de aplicación u otros activos). Ahora creemos un archivo de conjunto de imágenes. Llamémoslo, por ejemplo, SplashScreen (sí, muy original, lo sé :)).
Después de la creación, en la configuración vemos Apariencias con la opción Ninguna seleccionada. Haga clic en él y seleccione Cualquiera, Claro, Oscuro. En Any y Light arrastramos recursos para el tema ligero de iOS. En la oscuridad, para la oscuridad, respectivamente. Resulta así:
Eso es casi todo.
Apertura LaunchScreen.storyboard. Elegir Ver escena del controlador > Ver controlador > Ver y borrar todo desde allí. Después de esto seleccionamos Vistahaz clic en el icono del triángulo en la parte superior derecha y desmarca Guías de diseño > Área segura. Haga clic en el signo más y agréguelo a nuestro Vista Vista de imagen. Elimine todas las sangrías y la marca de verificación de Restricciones a los márgenes.
En la configuración de la derecha, especificamos el recurso para nuestra pantalla de bienvenida. Y seleccione Vista de contenido, que más nos convenga. En este caso, Escalar hasta rellenar. Pero Aspect Fit es adecuado para la mayoría.
Aquí puedes ver el tema oscuro y comprobar que la imagen ha cambiado correctamente.
Hemos resuelto la parte fácil de instalar en iOS.
En cuanto a la difícil, todo es mucho más divertido. No puedo ofrecer una solución ya preparada. Tendrá que exportar usted mismo todas las imágenes y colores que componen su pantalla de presentación y personalizar LaunchScreen.storyboard manualmente.
Te mostraremos cómo lo hacemos:
En general, como se puede ver en las capturas de pantalla, la técnica es similar, excepto que no se agrega una imagen completa, sino una pantalla compuesta. Pero hacemos todo de forma similar: añadimos colores, les asignamos diferentes paletas según el tema y con las imágenes actuamos como en el ejemplo anterior.
La mayor dificultad de este enfoque es la adaptación a diferentes modelos de iPhone. Esto se puede solucionar con diferentes sangrías. Pueden ser estáticos: se utilizan por igual en todos los modelos. Convencionalmente, 30 píxeles a la izquierda, y este será el caso en todos los modelos, independientemente de si la pantalla es más pequeña o más grande. También puede haber sangrías dinámicas, como por ejemplo en el caso de un logotipo. Todo está configurado en la configuración de Ver (para la imagen):
Así como la ubicación de las pantallas de diferentes modelos. Probablemente sería incluso más correcto decir la sangría que se conserva:
En una palabra, si elige este método, tendrá que probarlo usted mismo.
El toque final es ir al archivo AppDelegate.m y agregar lo siguiente:
(super application:application didFinishLaunchingWithOptions:launchOptions);
(RNSplashScreen show); // вызываем наш SplashScreen
return YES;En lugar de una línea
return (super application:application didFinishLaunchingWithOptions:launchOptions);Y agregar importación
#import "RNSplashScreen.h"configuración de Android
Hemos resuelto iOS, ahora comencemos a configurar Android. Aquí también comenzaremos con una opción simple, cuando solo usamos una imagen.
Primero que nada, transfiera los materiales generados a la carpeta. res (android > aplicación > src > principal > res). Sale así:
A continuación vamos a la carpeta res > valores y crea un archivo theme.xml, inserta lo siguiente allí
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="launchImage" format="reference"/>
</resources>Aquí hemos agregado un atributo personalizado. lanzarImagen.A continuación, vaya al archivo estilos.xml (android/app/src/main/res/values/styles.xml) y agregue lo siguiente:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
....
</style>
<!-- Добавляем это -->
<style name="LightTheme" parent="AppTheme">
<item name="launchImage">@drawable/launch_screen_light</item>
</style>
<!-- Добавляем это -->
<style name="DarkTheme" parent="AppTheme">
<item name="launchImage">@drawable/launch_screen_dark</item>
</style>
</resources>Aquí agregamos dos temas, Tema claro y Tema oscuro, y anotamos los valores que determinan nuestra imagen para lanzarImagen.
Luego en nuestra carpeta res creamos una carpeta disposición y agregarle el archivo pantalla_lanzamiento.xml. En este archivo escribimos:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="
android:scaleType="centerCrop"
/>
</RelativeLayout>Aquí definimos un enlace a nuestro atributo de imagen. tenga en cuenta android:scaleType=”fitXY”. Es posible que este valor no le convenga, busque opciones disponibles aquí.
Finalmente nos trasladamos a Actividad principal.java (android > aplicación > src > principal > java > com > nombre del paquete > nombre de la aplicación > Actividad principal.java) y sobrescriba el método onCreate con lo siguiente:
@Override
protected void onCreate(Bundle savedInstanceState) {
switch (getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK) {
case Configuration.UI_MODE_NIGHT_YES:
setTheme(R.style.DarkTheme);
break;
case Configuration.UI_MODE_NIGHT_NO:
setTheme(R.style.LightTheme);
break;
default:
setTheme(R.style.LightTheme);
}
SplashScreen.show(this);
super.onCreate(savedInstanceState);
}En el método super.onCreate() pasamos null si se utiliza un paquete Reaccionar pantallas nativas.
También en la parte superior necesitas agregar dos importaciones.
import org.devio.rn.splashscreen.SplashScreen;
import android.content.res.Configuration;
public class MainActivity extends ReactActivity { …Bibliotecas de implementación
Ahora todos los preparativos están completos. Ahora solo queda implementar la biblioteca en nuestra aplicación.
aplicación.tsx
// importar la biblioteca
import SplashScreen from 'react-native-splash-screen'
export default function App {
useEffect() {
// здесь может быть любой асинхронный код
// перед открытием приложения
// прячем наш Splash Screen
SplashScreen.hide();
}
. . . функция рендера
}Todo lo que queda es hacer Yarn Run iOS / Yarn Run Android y asegurarse de que todo funcione bien.
Eso es todo. Nuestra guía sobre cómo implementar Splash Screen para diferentes temas en react-native está completa. Esperamos que te ayude, y recuerda que la Splash Screen es una parte bastante importante de la aplicación, ya que es lo primero que ve el usuario. Así que no lo trates con desdén. ¡Los mejores deseos! El equipo dev.family estuvo en contacto, ¡hasta pronto!
