ios - apple - itunes

Pantalla de inicio de iOS en React Native

Question

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, por lo que he creado una LaunchImage dentro de Images.xcassets:

También he leído 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 he hecho eso, mi pantalla de inicio se volvió totalmente negra y cuando se carga la aplicación, hay marcos negros superiores e inferiores:

Así que 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.

Answer 1

Acabo de pasar por esto y funciona de maravilla. El único obstáculo que descubrí fue no borrar el contenido del simulador. Si encuentra que su nueva pantalla de inicio no funciona, debe abrir la simulación y pasar a lo siguiente:

Simulador> Restablecer contenido y configuración

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

Answer 2

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

Answer 3

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

Answer 4

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. Utilizo un editor de texto sublime para que sea cmd + shift + f) y debería funcionar.

Answer 5

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 de reacción nativa, ¿qué vemos para la pantalla de inicio?

> Pantalla de inicio predeterminada de Facebook

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

Crearon un LaunchScreen.xib

Creo que debe haber una razón para esto. Así que entré en LaunchScreen.xib e hice un cambio al texto predeterminado "React Native ..." o lo que sea 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 LaunchScreen.xib existente

Solución 2 Crear la mía

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

Paso 1:

Eliminar LaunchScreen.xib

paso 2:

haga clic en images.xcassets haga clic derecho en el espacio en blanco haga clic en **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 Screen y Launch Screen nombre que desee.

etapa 4

Haga clic en su proyecto en el navegador de la izquierda, vaya a Settings > General y en App Icons and Launch Images . Asegúrese de que la Launch Image Source esté en blanco y que el Launch Screen File pantalla de inicio tenga el mismo nombre que la pantalla de inicio recién creada.

paso 5

Haga clic en su nuevo archivo que creó en el step 2 , arrastre una Image View o edite lo que quiera.

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

Answer 6

Para mí en XCode 10.1 y react-native 59.2 tuve que seguir los pasos adicionales después de agregar las imágenes, el guión gráfico y 1 imagen universal.

• Haga clic derecho en la imagen, haga clic Show in Finder , luego edite su archivo Contents.json
• 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 las flechas rojas internas estén encendidas, no las flechas rojas externas
• Haga clic en "Márgenes relativos del área segura"

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

Answer 7

Pude resolver el problema con la ayuda de este hilo: La imagen de inicio no se muestra 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 estaban 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 necesita este archivo Contents.json 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 él:

En segundo lugar , debe abrir su proyecto en Xcode y en la configuración "General", debajo de " Iconos de aplicaciones e imágenes de lanzamiento " 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 haga clic en " Usar Catálogo de activos " después de eso. Se abrirá un modal, elegimos Migrar el catálogo Imágenes

Ahora, en el selector " Iniciar fuente de imágenes ", podemos elegir la carpeta que creamos antes, LaunchImage (la que tiene nuestras imágenes):

Escogemos 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 que mis imágenes de bienvenida funcionaran, así que quería compartir con la comunidad.

Answer 8

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 hacer muchos archivos de imagen para varias resoluciones.
• En cualquier momento cambie la pantalla de inicio utilizando una línea de recomendación.

Requisitos

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

Instalar

1. Instalar generador-rn-caja de herramientas y yo
2. npm install -g yo generator-rn-toolbox
3. Instalar imagemagick brew install imagemagick

4. Aplicar pantalla de bienvenida en iOS

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

   o Android

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

Eso es todo. :)

Source

Answer 9

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 las imágenes.

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 olvides cambiar el 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 aparezca 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 referirse: https://facebook.github.io/react-native/docs/running-on-device.html#pro-tip

Answer 10

Si desea utilizar el archivo .xib de pantalla de inicio existente, React Native se configuró inicialmente, pero con su propio logotipo y color de fondo (y sin ninguno de los textos predeterminados de React Native), puede seguir las instrucciones aquí: https://medium.com/@kelleyannerose/react-native-ios-splash-screen-in-xcode-bd53b84430ec .

Answer 11

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

Abra Info.plist en la carpeta del proyecto y elimine la clave "Nombre base del archivo de plumín principal". Luego, reconstruya y esperemos que el problema desaparezca.

Answer 12

Siga este enlace:

Si desea agregar una pantalla de bienvenida a mi aplicación React Native. Siga el proceso, el resultado será todo suyo.

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

PASO: 2 cambie el código 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 Debe abrir su aplicación en Xcode. Estos son los pasos a seguir:

a) Ve a la carpeta de tu proyecto

b) Abra la carpeta ios

c) Vaya 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 lanzamiento

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

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

j) Vuelva 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 prueba de bienvenida 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) Mantenga presionado el ícono de la aplicación en particular que desea eliminar y haga clic en el signo X en el ícono.

d) Ejecuta tu aplicación nuevamente usando react-native run-ios

Puedes ver tu pantalla de bienvenida

Answer 13

Al seguir las soluciones anteriores, mi aplicación se quedó atascada en la pantalla de bienvenida, así que hice los siguientes 7 pasos para agregar la pantalla de bienvenida personalizada en ios.

1. Abra el LaunchScreen.xib y ubique el archivo LaunchScreen.xib en su proyecto ( LaunchScreen.xib en cuenta 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 a su gusto.
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, cuarto desde la izquierda (cuando pasa el cursor, 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 inicio para hacer eso, haga clic en el siguiente botón y seleccione la vista de imagen de la lista, arrástrela y colóquela donde quiera en la pantalla de inicio.

5. Ahora tenemos que agregar la imagen a Images.xcassets para que podamos hacer referencia a ella en LaunchScreen.xib para hacer eso goto Images.xcassets . haga clic en el botón + seguido de import y luego agregue la imagen que desea mostrar en la pantalla de inicio. Debajo de AppIcon verá el nombre de su archivo de imagen. Este es el nombre que usaremos para hacer referencia en nuestro LaunchScreen.xib

6. Ahora tenemos que hacer referencia a la imagen que agregamos en el archivo LaunchScreen.xib , así que navegue de regreso a LaunchScreen.xib y haga clic en la image view que agregamos anteriormente y en la esquina derecha verá un montón de opciones. haga clic en el primero que dice image y seleccione la imagen que importó en el paso 5

7. limpia el proyecto y ejecuta react-native run-ios y deberías ver los cambios.