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:

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:

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:

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.

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

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

• [email protected] (640x960)
• [email protected] (640x1136)
• [email protected] (750x1334)
• [email protected] (1242x2208)
• [email protected] (2208x1242)

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

{
  "images": [
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "retina4"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "667h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "8.0",
      "orientation": "landscape",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "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:

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

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

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:

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.

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

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.

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.

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.

paso 5

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

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

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

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!

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

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

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".

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

Si desea utilizar el archivo .xib de la pantalla de inicio existente que React Native ha configurado inicialmente, pero con su propio logotipo y color de fondo (y sin el texto predeterminado de React Native), puede seguir las instrucciones aquí: https: // medium.com/@kelleyannerose/react-native-ios-splash-screen-in-xcode-bd53b84430ec .

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.

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

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

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á.

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")

4. 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.

5. 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

6. 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

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

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.