Pantalla de inicio de iOS en React Native


105

Estoy trabajando con una aplicación React Native y estoy tratando de configurar una pantalla de inicio personalizada, pero no puedo.

React Native crea un LaunchScreen.xib de forma predeterminada, así que he creado una LaunchImage dentro de Images.xcassets:

LaunchImage en Images.xcassets

También leí que tengo que modificar el "Archivo de pantalla de inicio" en "Iconos de aplicaciones e imágenes de inicio" en mis opciones:

Lanzar opciones de imágenes

Una vez que hice eso, mi pantalla de inicio se volvió totalmente negra y cuando se carga la aplicación, hay marcos negros superiores e inferiores:

ingrese la descripción de la imagen aquí

Entonces no sé qué tengo que hacer para configurar mi pantalla de inicio en mi proyecto React Native.

Estaré agradecido si alguien me puede ayudar con esos problemas.

Gracias por adelantado.


¿Por qué el archivo de pantalla de inicio está vacío en su segunda captura de pantalla?
Stefan

1
Porque he leído que tengo que dejarlo vacío si quiero que la aplicación use las imágenes en el directorio de activos
JV Lobo

Esta bien, tienes razón. Para comprenderlo mejor: ¿El texto del marco negro en la parte superior es suyo o de una reacción?
Stefan

Eso es de React. Al principio se muestra una pantalla negra (que sería la pantalla de inicio), luego aparece el texto que muestro en la captura de pantalla y después del texto aparece mi aplicación. Este texto también apareció antes, cuando mi aplicación tenía la pantalla de inicio React Native predeterminada.
JV Lobo

1
desinstalar del dispositivo, limpiar el proyecto e intentar instalarlo de nuevo
LS_

Respuestas:


119

Pude resolver el problema, con la ayuda de este hilo: La imagen de inicio no aparece en la aplicación iOS (usando Images.xcassets)

Así que lo explicaré profundamente en caso de que pueda ayudar a alguien más.

Primero , necesitas crear ciertas imágenes. Lo que usé para eso fue esta plantilla y esta página web con un generador automático: TiCons

ingrese la descripción de la imagen aquí

Cuando descargué mis imágenes, tomé las que están dentro de la carpeta assets / iphone, solo tomé esas:

  • Default@2x.png (640x960)
  • Predeterminado-568h@2x.png (640x1136)
  • Predeterminado-667h@2x.png (750x1334)
  • Default-Portrait-736h@3x.png (1242x2208)
  • Default-Landscape-736h@3x.png (2208x1242)

También necesitas este Contents.json archivo en la misma carpeta, lo obtuve de un amigo:

{
  "images": [
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-568h@2x.png",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "retina4"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-667h@2x.png",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "667h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-Landscape-736h@3x.png",
      "minimum-system-version": "8.0",
      "orientation": "landscape",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-Portrait-736h@3x.png",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default@2x.png",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x"
    }
  ],
  "info": {
    "version": 1,
    "author": "xcode"
  }
}

Entonces, en este punto creé una carpeta llamada LaunchImage.launchimage dentro de la carpeta Images.xcassets en mi proyecto React Native y guardé las imágenes y el archivo Contents.json dentro de ella:

ingrese la descripción de la imagen aquí

En segundo lugar , tienes que abrir tu proyecto en Xcode y en la configuración "General", debajo de " Iconos de la aplicación e Imágenes de inicio " tenemos que dejar la opción " Iniciar archivo de pantalla " vacía (también podemos eliminar el archivo LaunchScreen.xib dentro de nuestro proyecto ) y, a continuación, haga clic en " Usar catálogo de activos ". Se abrirá un modal, elegimos Migrar las Imágenes del catálogo

ingrese la descripción de la imagen aquí

Ahora, en el selector " Launch Images Source ", podemos elegir la carpeta que creamos antes, LaunchImage (la que tiene nuestras imágenes):

ingrese la descripción de la imagen aquí

Elegimos esto en lugar de Brand Assets y podemos eliminar la carpeta Brand Assets .

En este punto, podremos ejecutar nuestra aplicación React Native con nuestras imágenes de lanzamiento personalizadas:

ingrese la descripción de la imagen aquí

Sé que parece un poco complejo para una tarea supuestamente fácil, pero después de leer mucho al respecto, esta era la única forma en que podía hacer funcionar mis imágenes de presentación, así que quería compartirlo con la comunidad.


¿Las imágenes tienen que ser .png? Estoy tratando de usar .jpg
Adam Katz

No lo he probado con imágenes .jpg. Tal vez solo funcione con .png
JV Lobo

gracias, el error que recibo en xcode es que el archivo no tiene una extensión de archivo válida, por lo que parece probable que ese sea el problema, aunque no veo por qué jpg no funcionaría
Adam Katz

1
¿Tiene que tener las 5 opciones? Mi aplicación no está pensada para ser utilizada en paisaje, así que la dejé fuera pero no funciona, así que me pregunto si es así.
Adam Katz

1
Seguí teniendo problemas después de esto y tuve que eliminar la aplicación del simulador para que la pantalla de inicio original dejara de mostrarse.
Dan G Nelson

16

Asegúrese de eliminar la aplicación del simulador. Luego haz una limpieza en tu proyecto.


eliminar la aplicación del simulador funciona para mí. gracias
Andy

Eres mi salvavidas. Muchas gracias yyyyyyyyyy.
Detener

8

He estado mirando estas respuestas mucho en SO que contiene soluciones sobre cómo crear una nueva pantalla de inicio. Quiero decir, pensemos en ello por un minuto.

Cuando creamos un nuevo proyecto react-native, ¿qué vemos en la pantalla de inicio?

> Pantalla de inicio predeterminada de Facebook

Entonces eso me hizo pensar, ¿cómo lo hicieron?

Ellos crearon un LaunchScreen.xib

Creo que debe haber una razón para esto. Así que entré LaunchScreen.xibe hice un cambio en el texto predeterminado "React Native ..." o lo que dijera. Ejecuté la aplicación una vez más para ver que la pantalla de inicio reflejaba mis ediciones.

Solución 1 Edite el archivo LaunchScreen.xib existente

Solución 2 Crea la mía propia

Así que lo hice, me tomó más tiempo escribir esta respuesta que aprender a crear la mía propia. Both of these solutions are compatible with all the devices.

Paso 1:

Eliminar LaunchScreen.xib

paso 2:

haga images.xcassets clic en clic derecho en el espacio en blanco haga clic y **import**luego seleccione la imagen que desea agregar. ingrese la descripción de la imagen aquí

paso 3:

Haga clic derecho en la carpeta raíz de su proyecto y agregue un nuevo archivo de tipo Launch Screeny asígnele el nombre que desee.

ingrese la descripción de la imagen aquí

paso 4

Haga clic en su proyecto en el panel de navegación izquierdo, vaya a Settings> Generaly debajo App Icons and Launch Images. Asegúrese de que Launch Image Sourceesté en blanco y que Launch Screen Filesea ​​el mismo nombre que la pantalla de inicio recién creada.

ingrese la descripción de la imagen aquí

paso 5

Haga clic en su nuevo archivo que creó step 2, arrastre Image Viewo edite como le plazca.

ingrese la descripción de la imagen aquí

Entonces eso es todo, ya está. Ni siquiera necesita limpiar la solución, simplemente reconstruir.


1
@Noitidart Me alegro de poder ser de ayuda.
Tren

1
Lo que hice ni siquiera fue eliminar el LaunchScreen.xib, simplemente eliminé los nodos de texto, luego arrastré en una vista de imagen, importé la imagen como la describiste, luego configuré la imagen en el UIImageView :) ¿Hay alguna forma de hacerlo? ¿sensible? Como en la tableta, debería ser 3x y en el teléfono debería ser 2x. Además, mi UIImageView no está centrado en todos los dispositivos. :( Aquí hay una captura de pantalla de lo que tengo - i.imgur.com/o5SMgHN.png
Noitidart

1
@Noitidart Buen hallazgo en esos. Estoy seguro de que serían útiles para alguien que busque esta respuesta.
Tren

1
¡Gracias hermano! Creo que la forma en que descubrió es la forma real de hacerlo. Crear imágenes con un color de fondo establecido que sea del tamaño de cada dispositivo en cada paisaje / retrato no es la manera de hacerlo (cómo lo hace la respuesta más votada aquí). Ahora puedo ajustar FÁCILMENTE el color del fondo. El escalado, etc. se puede lograr perfectamente. Con la imagen, todo está en la imagen.
Noitidart

1
por lo tanto, el proceso es el mismo que si estuviera desarrollando una aplicación nativa rápida. cool
jasan

8

Actualizar

generator-rn-toolboxes obsoleto. Utilice react-native-make en su lugar.

vieja respuesta

Recomiendo generator-rn-toolbox para aplicar la pantalla de inicio o el icono principal usando react-native. Es más simple y fácil de usar a través de cli como react-native.

  • No es necesario abrir XCode.
  • No es necesario crear muchos archivos de imagen para varias resoluciones.
  • En cualquier momento cambie la pantalla de inicio usando una línea de recomendación.

Requisitos

  • nodo> = 6
  • Una imagen cuadrada o un archivo psd con un tamaño superior a 2208x2208 resolución px para una pantalla de inicio (pantalla de inicio)
  • Mente positiva ;)

Instalar en pc

  1. Instale generator-rn-toolbox y yo
  2. npm install -g yo generator-rn-toolbox
  3. Instalar imagemagick brew install imagemagick
  4. Aplicar la pantalla de presentación en iOS

    yo rn-toolbox:assets --splash YOURIMAGE.png --ios

    o Android

    yo rn-toolbox:assets --splash YOURIMAGE.png --android

Eso es todo. :)

Fuente


No puedo creer que tenga que preguntar esto ... ¿desde dónde ejecutas el comando?
AlxVallejo

@AlxVallejo Su directorio principal de proyectos.
Jeff Gu Kang

"✖ splash no se pudo encontrar" No creo que esto funcione
AlxVallejo

@AlxVallejo ¿Estaba tu archivo de imagen? Lo estoy usando de manera útil.
Jeff Gu Kang

1
generator-rn-toolboxla actualidad hace todo lo que hace la respuesta aceptada.
Felix

6

Simplemente pasó por esto y funciona de maravilla. El único obstáculo que descubrí fue no borrar el contenido del simulador. Si descubre que su nueva pantalla de inicio no está funcionando, debe abrir la simulación e ir a lo siguiente:

Simulador> Restablecer contenido y configuración

Debe haber un almacenamiento en caché duro dentro de ese simulador, pero una vez hecho esto, vuelva a ejecutar y verá la aplicación. ¡Asegúrese de hacer esto tanto para simuladores xcode como para simuladores nativos de reacción!


5

Asegúrese de que la selección de 'Archivo de pantalla de inicio' esté vacía: ingrese la descripción de la imagen aquí


1

Siga este enlace:

Si quieres agregar una pantalla de bienvenida a mi aplicación React Native, sigue el proceso, el resultado será todo tuyo.

PASO: 1 Primero, creé una carpeta splashImageResource y agregué el archivo launchScreen.xib con la imagen de bienvenida.

PASO: 2 cambie el código tal como está escrito dentro de la etiqueta de subvistas. con este código<subviews> <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" image="splash.png" translatesAutoresizingMaskIntoConstraints="NO" id="ZkI-RL-69Z"> </imageView> </subviews>

PASO: 3 Debes abrir tu aplicación en Xcode. Estos son los pasos a seguir:

a) Ve a la carpeta de tu proyecto

b) Abra la carpeta ios

c) Ve al archivo que tiene .xcodeproj como extensión, en mi caso es splasScreenTutorial.xcodeproj

d) Abra este archivo en su Xcode.

e) Elimine el archivo launchScreen.xib.

f) Haga clic en la carpeta splashScreenTutorial, luego vaya a la sección OBJETIVOS

g) Haga clic en la pestaña General en la esquina superior izquierda de su Xcode y desplácese hacia abajo hasta Iconos de aplicaciones e Imágenes de inicio

h) Vaya a Iniciar fuente de imágenes y haga clic en Usar catálogo de activos. Haga clic en migrar.

i) Elimine el texto LaunchScreen del archivo de pantalla de inicio.

j) Regrese a la carpeta de su proyecto y abra el archivo Images.xcassets. Debería ver AppIcon y LaunchImage.

k) A continuación, haga clic en LaunchImage. Finalmente, arrastre las imágenes de la pantalla de presentación que tiene de diferentes tamaños al cuadro Launch Image.

Arrastra las imágenes así.

Pantalla de bienvenida de prueba a) Para ver los cambios, debe eliminar la aplicación de su simulador si la ha ejecutado inicialmente.

b) Para eliminar la aplicación, haga clic en el menú Hardware en la barra de su Simulador y vaya a Inicio.

c) Toque y mantenga presionado el ícono de la aplicación particular que desea eliminar y haga clic en el signo X en el ícono.

d) Ejecute su aplicación nuevamente usando react-native run-ios

Puedes ver tu pantalla de bienvenida


1

Para mi XCode 10.1yreact-native 59.2 tuve que pasar por los pasos adicionales después de que ya la adición de imágenes, storyboard y 1 imagen universal.

  • Haga clic derecho en la imagen, haga clic en Show in Finder, luego edite su Contents.jsonarchivo
  • Agregue la imagen a las secciones 2x y 3x
  • Vaya al guión gráfico de la pantalla de inicio, con el menú "regla"
  • Asegúrese de que solo estén encendidas las flechas rojas interiores , no las exteriores flechas rojas
  • Haga clic en "Márgenes relativos del área segura".

ingrese la descripción de la imagen aquí

La imagen ahora debería estar centrada en iPhones de todos los tamaños (probado en vertical).



0

Si crea una pantalla de inicio con la ayuda de React, debe agregar lo mismo en el archivo LaunchScreen.xib en iOS Xcode para que pueda tomar una captura de pantalla y agregarla como una imagen en Images.xcassets.

Abra LaunchScreen y luego agregue UIImageView en la Vista desde la biblioteca de objetos desde el Panel derecho en Xcode.

ingrese la descripción de la imagen aquí

Agregue restricciones finales, iniciales, inferiores y superiores a la vista. Como se muestra abajo -

ingrese la descripción de la imagen aquí

No olvide cambiar UIImageView ContentMode como AspectFit para que se vea igual cuando se ejecute la aplicación.

Después de eso, debe agregar código en AppDelegate para que no obtenga una pantalla en blanco. El código es -

 UIView* launchScreenView = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0];
 launchScreenView.frame = self.window.bounds;
 rootView.loadingView = launchScreenView;

Puede referir: https://facebook.github.io/react-native/docs/running-on-device.html#pro-tip


0

Solo para aquellos que aún tienen problemas, falta un paso más en la respuesta aceptada antes de que funcione la pantalla de inicio de iOS.

Abra Info.plisten la carpeta del proyecto y elimine la tecla "Nombre base del archivo nib principal". Luego, reconstruya y, con suerte, el problema desaparecerá.


0

Después de seguir las soluciones anteriores, mi aplicación se atascaba en la pantalla de inicio, así que hice los siguientes 7 pasos para agregar la pantalla de inicio personalizada en ios.

  1. Abra el Xcode y localice el LaunchScreen.xib archivo en su proyecto (observe que esta es la pantalla que se muestra por defecto en ios)
  2. Para eliminar / editar el texto en la pantalla, haga clic en él y realice los cambios necesarios como desee.
  3. Para cambiar el color de fondo, ubique los siguientes íconos en la barra lateral derecha y haga clic en el pequeño botón de ícono en la parte superior, el cuarto desde la izquierda (cuando se desplaza, dirá "Mostrar el inspector de atributos")

ingrese la descripción de la imagen aquí

  1. Ahora que ya sabe cómo cambiar el color de fondo, agreguemos una imagen a la pantalla de bienvenida para hacerlo, haga clic en el siguiente botón y seleccione la vista Imagen de la lista y arrástrela y colóquela donde quiera que la desee en la pantalla de bienvenida.

ingrese la descripción de la imagen aquí

  1. Ahora tenemos que agregar la imagen para Images.xcassetsque podamos hacer referencia a ella en el LaunchScreen.xibpara hacer ese goto Images.xcassets. haga clic en el +botón seguido de importy luego agregue la imagen que desea mostrar en la pantalla de inicio. Debajo AppIconverá el nombre de su archivo de imagen. Este es el nombre que usaremos para hacer referencia en nuestroLaunchScreen.xib

  2. Ahora tenemos que hacer referencia a la imagen que agregamos en el LaunchScreen.xibarchivo, así que navegue hacia atrás LaunchScreen.xiby haga clic en la image viewque agregamos anteriormente y en la esquina derecha verá un montón de opciones. haga clic en el primero que dice imagey seleccione la imagen que importó en el paso 5

ingrese la descripción de la imagen aquí

  1. limpie el proyecto y ejecútelo react-native run-iosy debería ver los cambios.

-5

Debe configurar la fuente de imagen de la pantalla de inicio como su conjunto de imágenes. Luego elimine el archivo LauncScreen.xib. Luego haga una búsqueda global en su proyecto y elimine todas las referencias a LaunchScreen.xib (busque en todo su proyecto. Yo uso un editor de texto sublime, por lo que es cmd + shift + f) y debería funcionar.


Gracias por tu respuesta. No lo entiendo bien porque creo que cometiste un error tipográfico. Hice una búsqueda global en mi proyecto para eliminar las referencias a LaunchScreen.xib, pero no hay referencias al archivo: puu.sh/lGu7z/8fd88a886e.png Gracias.
JV Lobo
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.