Meu Primeiro App com React Native - #02 Tela de Splash, Icon e Logomarca

Na segunda aula do curso de criação de app com React Native, faremos a tela de splash, a logo e o icon do nosso aplicativo.

Icon

O ícone do nosso app deve ter dimensões quadradas, ou seja, ter a mesma largura e o mesmo comprimento. No nosso projeto vamos trabalhar com as medidas de 300px por 300px.

O ícone será salvo dentro de assets/img com o nome de icon.png

Tela de Splash

A tela de splash é aquela tela que aparece assim que abrimos o aplicativo. Ela faz referência ao tipo de serviço ou produto que estamos oferecendo.

Segundo a documentação, a tela de splash deve ter o tamanho de 1242px por 2436px.

A tela de splash também será salva no formato png, na pasta assets/img e com o nome splash.png

Logomarca

A logomarca é o símbolo maior da sua empresa e deve representar bem o serviço ou produto que você oferece.

app.json

Agora basta alterarmos o caminho do icon e da splash pra pasta img e o resizeMode da splash para cover para que ela ocupe toda a tela:

"icon": "./assets/img/icon.png",
"splash": {
  "image": "./assets/img/splash.png",
  "resizeMode": "cover",
  "backgroundColor": "#000"
},

Testando no emulador

Para testar no emulador abra o Android Studio. Posteriormente, vamos abrir o console e digitar os comandos:

cd c:/Project
expo start --android

Por hoje é só! Sucesso nos códigos e na vida!

Precisa de aulas particulares? webdesignemfoco@gmail.com