Tela de inicialização do iOS no React Native




xcode react-native (11)

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

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

Também li que tenho que modificar o "Launch Screen File" em "App Icons and Launch Images" nas minhas opções:

Depois disso, minha tela de inicialização fica totalmente preta e, quando o aplicativo é carregado, há quadros pretos superior e inferior:

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

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

Desde já, obrigado.


Answer #1

Siga este link:

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

PASSO: 1 Primeiro, criei uma pasta splashImageResource e adicionei o arquivo launchScreen.xib à imagem inicial.

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

PASSO: 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 possui .xcodeproj como extensão, no meu caso é splasScreenTutorial.xcodeproj

d) Abra este arquivo no 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 Iniciar imagens

h) Vá para Iniciar fonte de imagens e clique em Usar catálogo de ativos. 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. Por fim, 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, é necessário excluir o aplicativo do seu simulador se você o executou inicialmente.

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

c) Toque e segure o ícone do aplicativo em particular que você 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


Answer #2

Eu recomendo o generator-rn-toolbox para aplicar a tela de inicialização ou o ícone principal usando o react-native. É mais simples e fácil de usar através do cli como reagir nativo.

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

Exigências

  • nó> = 6
  • Um arquivo quadrado de imagem ou psd com um tamanho de resolução superior a 2208x2208 px para uma tela de inicialização (tela inicial)
  • Mente positiva ;)

Instalar

  1. Instale 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. :)

Source


Answer #3

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

Então, eu vou explicar isso profundamente, caso possa ajudar outra pessoa.

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

Quando baixei minhas imagens, peguei as dentro da pasta assets / iphone, peguei apenas aquelas:

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

Portanto, nesse ponto, criei uma pasta chamada LaunchImage.launchimage dentro da pasta Images.xcassets no meu projeto React Native e salve as imagens e o arquivo Contents.json dentro dele:

Segundo , você deve abrir seu projeto no Xcode e, nas configurações "Geral", abaixo de " Ícones de aplicativos e Imagens de inicialização ", temos que deixar a opção " Iniciar arquivo de tela " vazia (também podemos excluir o arquivo LaunchScreen.xib dentro de nosso projeto ) e clique em " Usar catálogo de ativos " depois disso. Um modal será aberto, optamos por migrar o catálogo de imagens

Agora, no seletor " Iniciar fonte de imagens ", podemos escolher a pasta que criamos anteriormente, LaunchImage (aquela com nossas imagens):

Escolhemos isso em vez de Brand Assets e podemos excluir a pasta Brand Assets .

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

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


Answer #4

Para mim, no XCode 10.1 e no XCode 10.1 react-native 59.2 , tive que seguir as etapas adicionais depois de adicionar as imagens, o storyboard e uma imagem universal.

  • Clique com o botão direito do mouse na imagem, clique Show in Finder e edite seu arquivo Contents.json
  • Adicione a imagem às seções 2x e 3x
  • Vá para o storyboard Launch Screen, com o menu "régua"
  • Verifique se apenas as setas vermelhas internas estão acesas, não as setas vermelhas externas
  • Clique em "Margens relativas de área segura"

Agora, a imagem deve estar centrada em todos os iPhones de todos os tamanhos (testados em Portrait).


Answer #5

Eu tenho procurado muito essas respostas no SO, contendo soluções sobre como criar uma nova tela de inicialização. Quero dizer, vamos pensar por um minuto.

Quando criamos um novo projeto react-native, o que vemos na tela de lançamento?

> Tela de inicialização padrão do Facebook

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

Eles criaram um LaunchScreen.xib

Eu acho que deve haver uma razão para isso. Então, entrei no LaunchScreen.xib e fiz uma alteração no texto padrão "React Native ..." ou o que quer que ele tenha dito. Executei o aplicativo mais uma vez para ver que a tela de lançamento refletia minhas edições.

Solução 1 Edite o LaunchScreen.xib existente

Solução 2 Crie meu próprio

Então, levei mais tempo para digitar essa resposta do que aprender a criar a minha. Both of these solutions are compatible with all the devices.

Passo 1:

Excluir LaunchScreen.xib

passo 2:

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

etapa 3:

Clique com o botão direito do mouse na pasta raiz do seu projeto e adicione um novo arquivo do tipo Launch Screen e Launch Screen nome que desejar.

Passo 4

Clique no seu projeto na navegação esquerda, vá para Settings > General e em App Icons and Launch Images . Verifique se a opção Launch Image Source está em branco e se o Launch Screen File tem o mesmo nome da tela de inicialização recém-criada.

passo 5

Clique no seu novo arquivo que você criou na step 2 , arraste uma Image View ou edite como desejar.

Então é isso, está feito. Você nem precisa limpar a solução, apenas reconstruir.



Answer #7

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


Answer #8

Se você criar uma tela Iniciar com a ajuda do React, adicione o mesmo arquivo no LaunchScreen.xib no iOS Xcode, para que você possa tirar uma Captura de tela e adicioná-la como Imagem nos Image.xcassets.

Abra o LaunchScreen e adicione UIImageView na exibição da biblioteca de objetos no painel direito do Xcode.

Adicione restrições à direita, à esquerda, à esquerda e à direita na exibição. Como mostrado abaixo -

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

Depois disso, você precisa adicionar código no AppDelegate para não obter 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


Answer #9

Verifique se a seleção 'Iniciar arquivo de tela' está vazia:


Answer #10

Acabei de passar por isso e trabalha um prazer. O único bloqueio 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, será necessário abrir a simulação e seguir o seguinte:

Simulador> Redefinir conteúdo e configurações

Deve haver algum cache incondicional dentro desse simulador, mas uma vez feito isso - execute novamente e você verá o aplicativo. Faça isso nos simuladores xcode e simuladores nativos de reação!


Answer #11

Após seguir as soluções acima, meu aplicativo ficou travado na tela inicial, então executei as 7 etapas a seguir para adicionar a tela inicial personalizada no ios.

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

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

  1. Agora temos que adicionar a imagem aos Images.xcassets para que possamos fazer referência a ela no LaunchScreen.xib para fazer isso, LaunchScreen.xib para Images.xcassets . clique no botão + seguido de import e adicione a imagem que deseja mostrar na tela inicial. Abaixo do AppIcon você verá o nome do arquivo de imagem. Esse é o nome que usaremos para fazer referência em nosso LaunchScreen.xib

  2. Agora temos que fazer referência à imagem que adicionamos no arquivo LaunchScreen.xib então navegue de volta para LaunchScreen.xib e clique na image view da image view que adicionamos anteriormente e, no canto direito, você verá várias opções. clique no primeiro que diz image e selecione a imagem que você importou na etapa 5

  1. limpe o projeto e execute react-native run-ios e você deverá ver as alterações.




asset-catalog