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:

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:

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:

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.

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

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

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

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

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:

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

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

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:

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.

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

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.

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.

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.

passo 5

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

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

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

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!

Certifique-se de que a seleção 'Launch Screen File' esteja vazia:

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

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"

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

Se quiser usar o arquivo .xib da tela inicial existente que o React Native configurou inicialmente, mas com seu próprio logotipo e cor de fundo (e sem nenhum texto padrão do React Native), você pode seguir as instruções aqui: https: // medium.com/@kelleyannerose/react-native-ios-splash-screen-in-xcode-bd53b84430ec .

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.

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

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

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.

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

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

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

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

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

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.