November 29, 2018 · iOS Android React Native

Como adicionar Splash Screen no React Native (iOS e Android)

frajola

Vou considerar que você já tenha instalado o React Native, configurado na máquina e etc etc. Para esse pequeno tutorial (macOS High Sierra) simplesmente rodei um react-native init Frajola e segui os passos abaixo.

iOS (Xcode 10.1)

No Xcode é só clicar e arrastar as coisas basicamente.. então crie 3 imagens, por exemplo:

Digamos que o frajola.png tenha 200px de largura, logo a imagem 2x tera 400px e a imagem 3x tera 600px, a idéia óbvia é essa.

Para manipular sua imagem use um editor qualquer ou esse site aqui http://nsimage.brosteins.com que já bota nas medidas proporcionais.

Abra seu projeto iOS no Xcode:

Frajola/ios/Frajola.xcodeproj (se voce utiliza Pod abra o Frajola.xcworkspace)

Na arvore do projeto, clique em Images.xcassets, depois adiciona um Image Set, clicando la embaixo no (+), depois New Image Set.. vai ser gerado um Image com 3 espaços pra adicionar arquivos:

ios-step-1

Arraste as imagens que voce criou conforme o tamanho delas:
1x = frajola.png
2x = frajola@2x.png
3x = frajola@3x.png

ios-step-2

ios-step-3

Agora volte na arvore do projeto e clique em LaunchScreen.xib, depois selecione View e altere em Simulated Metrics a propriedade Size de "Freedom" para "Page Sheet":

ios-step-4

ios-step-5

Selecione os componentes de texto da View e apague eles para inserir depois a imagem:

ios-step-6

Agora clique DENTRO do espaço em branco da View e depois adicione o componente Image View no botão de bibliotecas lá em cima:

ios-step-7

Procure por "Image", e adicione à View

ios-step-8

Agora clique no componente recém adicionado e arraste ele no espaço da View até ele centralizar (uma marcação te ajuda quando tiver certo):

ios-step-9

Ainda com o componente selecionado vá nas propriedades do lado direito em Image View e digite "Image" para ele carregar a imagem que você adicionou lá em cima, em seguida altere o Content Mode para "Aspect Fit":

ios-step-10

E por último ajuste no inspetor de tamanho o posicionamento do componente dentro da view. Em Auto Resizing clique nas setinhas dentro do quadrado para ficar igual ao mostrado abaixo:

ios-step-11

Mais nítido fica assim ó:

Screen-Shot-2018-11-29-at-17.04.59

Pronto. Agora só abrir uma cerveja, buildar no device ou simulador e ver funcionando..

ios-step-13 ios-step-14

Android

No android é no dedo, então pra começar crie a pasta /drawable no caminho do android/app/src/main/res/ seu projeto, ficando assim:

android/app/src/main/res/drawable/

Agora adicione um arquivo com nome splash_screen.xml nessa pasta /drawable criada, ficando assim:

android/app/src/main/res/drawable/splash_screen.xml

E cole o conteudo abaixo dentro desse arquivo splash_screen.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/fundo_app"/>
    <item>
      <bitmap 
        android:gravity="center" 
        android:src="@drawable/frajola"/>
    </item>
</layer-list>

Note que tem um @color/fundo_app ali que sera a cor do fundo do splashscreen e um @drawable/frajola que sera a imagem centralizada. Vamos chegar lá.

Para adicionar a cor vá em android/app/src/main/res/values e adicione um novo arquivo chamado colors.xml, ficando assim:

android/app/src/main/res/values/colors.xml

e adicione o conteudo abaixo:

<resources>
    <color name="fundo_app">#1A97B4</color>
</resources>

Manje que fundo_app é utilizado lá no arquivo splash_screen.xml.

E agora adicione a imagem frajola.png na pasta android/app/src/main/res/drawable/, ficando assim:

android/app/src/main/res/drawable/frajola.png

Não precisa incluir a extensao .png lá na config anterior @drawable/frajola.

Pra finalizar, no arquivo android/app/src/main/res/styles.xml adicione a config abaixo dentro da tag <style>:

<item name="android:windowBackground">@drawable/splash_screen</item>

ficando assim:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
      <!-- Customize your theme here. -->

      <item name="android:windowBackground">@drawable/splash_screen</item>

    </style>s
</resources>

Só isso. Resumo da ópera:

ios-step-13

Abra o emulador, roda o react-native run-android e ggwp:

step-android-final

package.json usado nesse tutorial:

{
  "name": "Frajola",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.1",
    "react-native": "0.57.7"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.49.2",
    "react-test-renderer": "16.6.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

Cheers,

Comments powered by Disqus