Tela inicial do iOS em React Native


105

Estou trabalhando com um aplicativo React Native e tentando definir uma tela de inicialização personalizada, mas não consigo.

React Native cria um LaunchScreen.xib por padrão, então criei um LaunchImage dentro de Images.xcassets:

LaunchImage em Images.xcassets

Também li que devo modificar o "Arquivo da tela de inicialização" em "Ícones de aplicativos e imagens de inicialização" em minhas opções:

Opções de lançamento de imagens

Depois de fazer isso, minha tela de inicialização ficou totalmente preta e quando o aplicativo é carregado, há quadros pretos na parte superior e inferior:

insira a descrição da imagem aqui

Portanto, não sei o que devo fazer para definir minha tela de inicialização em meu projeto React Native.

Ficarei grato se alguém puder me ajudar com esses problemas.

Desde já, obrigado.


Por que o Arquivo da Tela de Inicialização está vazio na sua segunda captura de tela?
Stefan

1
Porque li que tenho que deixar em branco se quiser que o aplicativo use as imagens no diretório de ativos
JV Lobo

OK, você está certo. Para obter uma melhor compreensão: O texto da moldura preta na parte superior é de você ou de reagir?
Stefan

Isso é do React. A princípio uma tela preta é mostrada (que seria a tela de lançamento), depois o texto que mostro na captura de tela, e depois o texto meu aplicativo aparece. Este texto também apareceu antes, quando meu aplicativo tinha a tela de inicialização padrão do React Native.
JV Lobo

1
desinstale do dispositivo, limpe o projeto e tente instalar novamente
LS_

Respostas:


120

Consegui resolver o problema com a ajuda deste tópico: inicialização não aparece no aplicativo iOS (usando Images.xcassets)

Vou explicar profundamente, caso possa ajudar outra pessoa.

Primeiro , você precisa criar certas imagens. O que usei para isso foi este template e esta página com um gerador automático: TiCons

insira a descrição da imagem aqui

Quando baixei minhas imagens, peguei as que estavam dentro da pasta assets / iphone, só peguei aquelas:

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

Você também precisa deste Contents.json arquivo na mesma pasta, comprei de um 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"
  }
}

Então, neste ponto eu criei uma pasta chamada LaunchImage.launchimage dentro da pasta Images.xcassets em meu projeto React Native e salvei as imagens e o arquivo Contents.json dentro dela:

insira a descrição da imagem aqui

Em segundo lugar , você deve abrir seu projeto no Xcode e nas configurações "Gerais", abaixo de " Ícones do aplicativo e imagens de inicialização ", temos que deixar a opção " Arquivo de tela inicial " vazia (também podemos excluir o arquivo LaunchScreen.xib dentro de nosso projeto ) e, em seguida , clique em " Usar catálogo de ativos ". Será aberto um modal, optamos por Migrar as Imagens do catálogo

insira a descrição da imagem aqui

Agora, no seletor " Launch Images Source ", podemos escolher a pasta que criamos antes, LaunchImage (aquela com nossas imagens):

insira a descrição da imagem aqui

Escolhemos este em vez de Ativos de marca e podemos excluir a pasta Ativos de marca .

Neste ponto, poderemos executar nosso aplicativo React Native com nossas imagens de inicialização personalizadas:

insira a descrição da imagem aqui

Eu sei que parece um pouco complexo para uma tarefa supostamente fácil, mas depois de ler muito sobre isso, essa era a única maneira de fazer minhas imagens splash funcionarem, então eu queria compartilhar com a comunidade.


As imagens têm que ser .png Estou tentando usar .jpg
Adam Katz

Não tentei com imagens .jpg. Talvez funcione apenas com .png
JV Lobo

obrigado o erro que estou recebendo no xcode, o arquivo não tem uma extensão válida, então parece que esse é o problema, embora eu não veja por que o jpg não funcionaria
Adam Katz

1
Você tem que ter todas as 5 opções, meu aplicativo não se destina a ser usado paisagem, então eu o deixei de fora, mas não está funcionando, então estou me perguntando se é isso
Adam Katz

1
Eu ainda tive problemas depois disso e tive que excluir o aplicativo do simulador para que a tela de inicialização original parasse de ser exibida.
Dan G Nelson de

16

Certifique-se de excluir o aplicativo do simulador. Em seguida, faça uma limpeza em seu projeto.


excluir o aplicativo do simulador funciona para mim. obrigado
Andy

Você é meu salva-vidas. Muito obrigadayyyyyyyyy.
Parada

9

Tenho olhado muito para essas respostas em SO contendo soluções de como criar uma nova tela de lançamento. Quero dizer, vamos pensar sobre isso por um minuto.

Quando criamos um novo projeto reagente nativo, o que vemos na tela de lançamento?

> Tela inicial padrão do Facebook

Então isso me fez pensar: como eles fizeram isso?

Eles criaram um LaunchScreen.xib

Acho que deve haver uma razão para isso. Então entrei no LaunchScreen.xibe fiz uma alteração no texto padrão "React Native ..." ou o que quer que ele diga. Executei o aplicativo mais uma vez para ver se a tela de inicialização refletia minhas edições.

Solução 1 Edite o LaunchScreen.xib existente

Solução 2 Criar meu próprio

Então eu fiz, levei mais tempo para digitar esta resposta do que aprender a criar a minha própria. Both of these solutions are compatible with all the devices.

Passo 1:

Excluir LaunchScreen.xib

passo 2:

clique com images.xcassets o botão direito do mouse no espaço em branco **import**e selecione a imagem que deseja adicionar. insira a descrição da imagem aqui

etapa 3:

Clique com o botão direito na pasta raiz do seu projeto e adicione um novo arquivo do tipo Launch Screene nomeie-o como quiser.

insira a descrição da imagem aqui

Passo 4

Clique no seu projeto no painel de navegação esquerdo, vá para Settings> Generale em App Icons and Launch Images. Certifique-se de que Launch Image Sourceesteja em branco e que Launch Screen Filetenha o mesmo nome de sua tela de inicialização recém-criada.

insira a descrição da imagem aqui

passo 5

Clique no novo arquivo que você criou step 2, arraste Image Viewou edite como quiser.

insira a descrição da imagem aqui

Então é isso, pronto. Você nem precisa limpar a solução, apenas reconstrua.


1
@Noitidart Que bom que pude ajudar.
Trem de

1
O que eu não fiz foi nem deletar o LaunchScreen.xib, eu apenas deletei os nós de texto, então arrastei em uma visualização de imagem, importei a imagem como você descreveu, a seguir configurei a imagem no UIImageView :) Existe alguma maneira de fazer isso responsivo? Como no tablet deve ser 3x e no telefone deve ser 2x? Além disso, meu UIImageView não está centralizado em todos os dispositivos. :( Aqui está a captura de tela do que eu tenho - i.imgur.com/o5SMgHN.png
Noitidart de

1
@Noitidart Bom encontrar neles. Tenho certeza de que seriam úteis para quem está olhando esta resposta.
Trem de

1
Obrigado irmão! Acho que a maneira como você descobriu é a maneira real de fazer isso. Criar imagens com uma cor de fundo definida que sejam do tamanho de cada dispositivo em cada paisagem / retrato não é a maneira de fazer isso (como a resposta mais votada aqui faz isso). Agora posso ajustar FACILMENTE a cor do fundo. O dimensionamento etc pode ser alcançado perfeitamente. Com a imagem, tudo está na imagem.
Noitidart de

1
portanto, o processo é o mesmo como se você estivesse desenvolvendo um aplicativo nativo rápido. legal
jasan

8

Atualizar

generator-rn-toolboxestá obsoleto. Em vez disso, use react-native-make .

resposta antiga

Eu recomendo generator-rn-toolbox para aplicar a tela inicial ou o ícone principal usando o react-native. É mais simples e fácil de usar por meio de cli como reagente nativo.

  • Não precisa abrir o XCode.
  • Não é necessário fazer muitos arquivos de imagem para várias resoluções.
  • A qualquer momento, altere a tela de lançamento usando uma linha de recomendação.

Requisitos

  • nó> = 6
  • Uma imagem quadrada ou arquivo psd com um tamanho de resolução de mais de 2208x2208 px para uma tela inicial (tela inicial)
  • Mente positiva ;)

Instalar

  1. Instale o generator-rn-toolbox e yo
  2. npm install -g yo generator-rn-toolbox
  3. Instalar imagemagick brew install imagemagick
  4. Aplicar tela inicial no iOS

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

    ou Android

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

Isso é tudo. :)

Fonte


não acredito que tenho que perguntar isso ... de onde você executa o comando?
AlxVallejo 01 de

@AlxVallejo Seu diretório de projeto principal.
Jeff Gu Kang

"✖ splash não foi encontrado" Eu não acho que isso funcione
AlxVallejo 01 de

@AlxVallejo Estava lá o seu arquivo de imagem? Estou usando-o de maneira útil.
Jeff Gu Kang

1
generator-rn-toolboxa realidade faz tudo o que a resposta aceita.
Felix

6

Só passei por isso e funciona muito bem. O único obstáculo que descobri não foi limpar o conteúdo do simulador. Se você achar que sua nova tela de inicialização não está funcionando, você precisa abrir a simulação e ir para o seguinte:

Simulador> Redefinir conteúdo e configurações

Deve haver algum cache de hardcore acontecendo dentro do simulador, mas uma vez que isso foi feito - execute novamente e você verá o aplicativo. Certifique-se de fazer isso tanto para os simuladores xcode quanto para os simuladores react-nativos!


5

Certifique-se de que a seleção 'Launch Screen File' esteja vazia: insira a descrição da imagem aqui


1

Siga este link:

Se você quiser adicionar uma tela inicial ao meu aplicativo React Native. Siga o processo, o resultado será todo seu.

ETAPA: 1 Primeiro, criei uma pasta splashImageResource e adicionei o arquivo launchScreen.xib com a imagem inicial.

ETAPA: 2 mude o código conforme escrito na tag subviews. com este código<subviews> <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" image="splash.png" translatesAutoresizingMaskIntoConstraints="NO" id="ZkI-RL-69Z"> </imageView> </subviews>

ETAPA: 3 Você deve abrir seu aplicativo no Xcode. Aqui estão as etapas a seguir:

a) Vá para a pasta do seu projeto

b) Abra a pasta ios

c) Vá para o arquivo que tem .xcodeproj como extensão, no meu caso é splasScreenTutorial.xcodeproj

d) Abra este arquivo em seu Xcode.

e) Exclua o arquivo launchScreen.xib.

f) Clique na pasta splashScreenTutorial e vá para a seção TARGETS

g) Clique na guia Geral no canto superior esquerdo do seu Xcode e role para baixo até ícones de aplicativos e imagens de inicialização

h) Acesse Launch Images Source e clique em Use Asset Catalog. Clique em migrar.

i) Remova o texto LaunchScreen do Launch Screen File.

j) Volte para a pasta do projeto e abra o arquivo Images.xcassets. Você deve ver AppIcon e LaunchImage.

k) Em seguida, clique em LaunchImage. Finalmente, arraste as imagens da tela inicial de tamanhos diferentes para a caixa Launch Image.

Arraste as imagens assim.

Tela inicial de teste a) Para ver as alterações, você precisa excluir o aplicativo de seu simulador se você executou o aplicativo inicialmente.

b) Para excluir o aplicativo, clique no menu Hardware na barra do Simulador e vá para a Página inicial.

c) Toque e mantenha pressionado o ícone do aplicativo específico que deseja excluir e clique no sinal X no ícone.

d) Execute seu aplicativo novamente usando run-ios react-native

Você pode ver sua tela inicial


1

Para mim, continuei XCode 10.1e react-native 59.2tive que passar pelas etapas adicionais depois de já adicionar as imagens, o storyboard e 1 imagem universal.

  • Clique com o botão direito na imagem, clique em Show in Findere edite seu Contents.jsonarquivo
  • Adicione a imagem às seções 2x e 3x
  • Vá para o storyboard da tela inicial, com o menu "régua"
  • Certifique-se de que apenas as setas vermelhas internas estejam ligadas, não as setas vermelhas externas
  • Clique em "Margens relativas à área segura"

insira a descrição da imagem aqui

A imagem agora deve ser centralizada em iPhones de todos os tamanhos (testado em Retrato).



0

Se você criar uma tela de inicialização com a ajuda do React, deverá adicionar a mesma coisa no arquivo LaunchScreen.xib no iOS Xcode para que você possa pegar uma captura de tela e adicioná-la como uma imagem em Images.xcassets.

Abra LaunchScreen e adicione UIImageView em View from Object Library no painel direito do Xcode.

insira a descrição da imagem aqui

Adicione restrições à direita, à esquerda, inferior e superior à vista. Como mostrado abaixo -

insira a descrição da imagem aqui

Não se esqueça de alterar o UIImageView ContentMode como AspectFit para que tenha a mesma aparência quando o aplicativo for executado.

Depois disso, você precisa adicionar o código em AppDelegate para que você não obtenha uma tela branca. O código é -

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

Você pode consultar - https://facebook.github.io/react-native/docs/running-on-device.html#pro-tip


0

Apenas para aqueles que ainda estão com problemas, há mais uma etapa faltando na resposta aceita antes de fazer a tela de inicialização do iOS funcionar.

Abra Info.plista pasta do projeto e exclua a chave "Nome base do arquivo nib principal". Em seguida, reconstrua e, com sorte, o problema terá desaparecido.


0

Ao seguir as soluções acima, meu aplicativo estava travando na tela inicial, então fiz as 7 etapas a seguir para adicionar a tela inicial personalizada no ios.

  1. Abra o Xcode e localize o LaunchScreen.xibarquivo em seu projeto (observe que esta é a tela que é mostrada por padrão no ios)
  2. Para remover / editar o texto da tela clique nele e faça as alterações necessárias conforme desejar.
  3. Para alterar a cor de fundo, localize os seguintes ícones na barra lateral direita e clique no pequeno botão do ícone no topo, o quarto da esquerda (quando você passa o mouse, ele dirá “Mostrar o Inspetor de Atributos”)

insira a descrição da imagem aqui

  1. Agora que você já sabe como alterar a cor de fundo, vamos adicionar a imagem à tela inicial para fazer isso, clique no botão a seguir e selecione a visualização da imagem da lista e arraste e coloque-a onde quiser na tela inicial.

insira a descrição da imagem aqui

  1. Agora temos que adicionar a imagem ao Images.xcassetspara que possamos referenciá-lo no LaunchScreen.xibpara fazer esse goto Images.xcassets. clique no +botão seguido de importe adicione a imagem que deseja mostrar na tela inicial. Abaixo AppIconvocê verá o nome do arquivo de imagem. Este é o nome que usaremos como referência em nossoLaunchScreen.xib

  2. Agora temos que fazer referência à imagem que adicionamos no LaunchScreen.xibarquivo, então navegue de volta LaunchScreen.xibe clique no image viewque adicionamos anteriormente e no canto direito você verá um monte de opções. clique no primeiro que diz imagee selecione a imagem que você importou na etapa 5

insira a descrição da imagem aqui

  1. limpe o projeto e execute react-native run-iose você verá as mudanças.

-5

Você deve definir a origem da imagem da tela de inicialização como seu conjunto de imagens. Em seguida, exclua o arquivo LauncScreen.xib. Depois faça uma pesquisa global em seu projeto e remova todas as referências a LaunchScreen.xib (veja em todo o seu projeto. Eu uso o editor de texto sublime, então é cmd + shift + f) e deve funcionar.


Obrigado pela sua resposta. Não entendo bem porque acho que você cometeu um erro de digitação. Fiz uma pesquisa global em meu projeto para remover referências a LaunchScreen.xib, mas não há referências ao arquivo: puu.sh/lGu7z/8fd88a886e.png Obrigado.
JV Lobo
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.