8,515 leituras

Como adicionar ícones e tela inicial no React Native (sem biblioteca)

por Lucas Leonardo7m2023/03/15

Muito longo; Para ler

Este tutorial foi criado com o aplicativo construído usando create-react-app. Para trabalhar com o ambiente da Apple, precisamos de um macOS. Para isso, precisaremos de ícones em vários tamanhos, bem como uma versão redonda dos ícones (sem fundo). Além disso, observe que, se você não tiver esses tamanhos, temos um guia passo a passo sobre como configurar isso.

featured image - Como adicionar ícones e tela inicial no React Native (sem biblioteca)

Hoje me deparei com o seguinte desafio no meu estágio: modificar/implementar uma splash screen e um ícone para o projeto que estou desenvolvendo.

Porém, preferi fazer nativamente para não ficar dependente de bibliotecas de terceiros. Reservei um tempo para fazer o spike (estudo) de como funciona, onde teria que fazer alterações e a que se aplicaria. Depois de fazer o spike, entendi que teria que fazer separadamente para iOS e Android.

Vamos falar primeiro sobre o iOS!

Nota: Este tutorial foi criado com o aplicativo criado usando create-react-app.

iOS

Em primeiro lugar, precisamos lembrar que para trabalhar com o ambiente da Apple, precisamos de um macOS. Agora que o projeto já está criado, vamos até a pasta 'ios' e abri-lo no Xcode .

Após isso, vamos para a pasta com o nome do nosso projeto, seguindo o exemplo fictício abaixo:
Agora, iremos para o arquivo 'Imagens', onde teremos as opções de tamanho. Basta arrastar as imagens correspondentes para cada dimensão e também uma para ser o ícone do app para usar na tela inicial (caso você não saiba como formatar suas imagens para atender as normas, ao final do artigo, teremos um breve tutorial de como fazer).
Neste ponto, já terminamos de configurar os ícones e agora passamos para a tela inicial. Para esta etapa, usarei um fundo sólido e uma imagem no centro como exemplo, mas você pode editá-lo como seu design criou (ou como você imaginou rs).

Primeiramente, abriremos o arquivo 'LaunchScreen' no Xcode. Neste arquivo, navegaremos na seguinte ordem: 'View Controller Scene' → 'View Controller' → 'View' .

Nesse campo, temos a área segura, que nada mais é do que o espaço útil da tela.

Por padrão, ele já vem com o nome que você deu ao app quando o criou e um rodapé 'Powered by React Native'. Nesse caso, excluiremos o rodapé e o nome do aplicativo. Após isso, vamos clicar no '+' no canto superior direito e ir até a opção 'Image View' e arrastar para o aplicativo, alinhar no meio, e ajustar a responsividade.
Agora que ajustamos tudo, basta fechar o Xcode e construir sua aplicação. Seu app estará todo configurado

(Obs: se você já tinha rodado no seu celular ou emulador antes, lembre-se de deletar o app para que as alterações dos ícones sejam aplicadas)!

Android

Agora vamos passar para a configuração do Android. Para isso, precisaremos de ícones em vários tamanhos, bem como uma versão redonda dos ícones (sem fundo). Além disso, observe que, se você não tiver esses tamanhos, temos um guia passo a passo no final da postagem sobre como configurar isso. Um pouco diferente do que fizemos no iOS, optei por não usar o Android Studio aqui e, ao invés disso, modificar o código diretamente porque não achei o menu de formatação muito interessante!
Com as imagens já salvas em seu aparelho, abriremos a pasta do aplicativo no gerenciador de arquivos → android → app → src → main → res. Dentro da pasta "res", temos a pasta "drawable" e outras pastas "mipmap-suffix" .

A pasta "drawable" é onde configuraremos nosso splash e teremos o ícone principal, enquanto as pastas "mipmap" são responsáveis pelos diferentes tamanhos de ícones e ícones redondos. A primeira coisa que faremos é substituir os arquivos de ícone pelos nossos. Recomendo usar os mesmos nomes que já existem para não ter que modificar o código nativo ainda, conforme mostrado abaixo:

Agora que já fizemos alterações em toda nossa aplicação, vamos passar para a parte nativa! Dentro da pasta drawable, temos o arquivo "rn_edit_text_material.xml" e faremos algumas configurações nele.

Para torná-lo menos detalhado para você escrever, vou deixar as configurações que usei para você simplesmente copiar e colar em seu código junto com uma explicação de cada alteração: Adicionamos a tag <layer-list> para direcionar os esquemas do projeto , e dentro dela passamos o que queremos usar.

Neste caso, utilizei a tag <item android: drawable="@color/primary" /> para definir a cor de fundo (configuraremos no próximo passo), e a última tag com o item android: prefix para definir as dimensões, qual imagem usar e seu posicionamento na tela do dispositivo.

 <?xml version="1.0" encoding="utf-8"?> <!-- Copyright (C) 2014 The Android Open Source Project Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!-- This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I). The item below with state_pressed="false" and state_focused="false" causes a NullPointerException. NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/> For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR. --> <item android:drawable="@color/primary" /> <item android:width="100dp" android:height="100dp" android:drawable="@drawable/icon" android:gravity="center" /> </layer-list>

Agora vamos configurar nosso backgroundColor, para isso vamos navegar até a pasta "res" e criar um arquivo chamado "colors.xml" dentro da pasta "values". Vamos adicionar o código abaixo, que contém uma tag <resources> com nossa tag background color, já com o mesmo nome que demos no passo anterior.
```
 <?xml version="1.0" encoding="utf-8" ?> <resources> <color name="primary">#f2f2f2</color> </resources>
```

"styles.xml" é um arquivo dentro da pasta "values", onde iremos editar a seguinte linha que vem como padrão ao criar o app:
```
 <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
```
a este código:
```
 <item name="android:windowBackground"> @drawable/rn_edit_text_material </item> <item name="android:statusBarColor"> @color/primary </item>
```
No trecho de código mencionado acima, definimos a qual janela pertence o plano de fundo na parte superior e, na parte inferior, definimos a cor (definida anteriormente). Bom trabalho! Seu aplicativo Android deve estar pronto com a nova tela inicial e ícones. Não se esqueça de testá-lo completamente antes de publicá-lo na loja de aplicativos. Boa sorte com seu aplicativo!

Criação de ícones nos tamanhos desejados.

Para criar nossos ícones nos tamanhos exatos, usaremos 2 ferramentas, a primeira se chama #Figma ( https://www.figma.com/ ) e o segundo é um site chamado #ApeTools ( https://apetools.webprofusion.com/#/tools/imagegorilla ). No ApeTools, carregamos nossa imagem e formatamos no tamanho padrão iOS ou Android. No Figma, faremos o upload de nossas imagens do Android e adicionaremos um borderRadius a elas para torná-las arredondadas.

ApeTools:
Para utilizá-lo, iremos clicar na opção "escolher arquivo", selecionar o Logotipo e em seguida selecionar a base Android e iOS, após isso é só clicar em Kapow! e o site renderizará automaticamente nossos ícones.
Figma:
Nota: Esta etapa é apenas para configurar o ícone do Android.

Abriremos o site ou o aplicativo #Figma, subiremos as imagens que queremos arredondar e no menu da direita, na opção curva, colocaremos '100' para obter um círculo perfeito (no exemplo abaixo fiz ele com apenas uma imagem para ilustração, mas deve ser feito em todas as imagens do "@mipmap" e também usei um borderRadius maior porque minha imagem de exemplo ficou muito grande).