Neste tutorial, vamos demonstrar como construir e mostrar uma tela inicial no React Native. Mostraremos como criar telas de boas-vindas impressionantes para aplicativos iOS e Android usando react-native-splash-screen .
Aqui está o que vamos cobrir:
- O que é uma tela inicial?
- Exemplo de tela inicial do React Native
- Por que o tamanho da imagem é importante
- Como construir uma tela inicial no React Native
O que é uma tela inicial?
A tela inicial é a primeira tela que aparece antes que o usuário acesse o restante das funcionalidades do seu aplicativo. Uma tela inicial é sem dúvida a melhor maneira de fazer com que o nome da marca e o ícone do seu aplicativo móvel fiquem presos no subconsciente do usuário.
Em aplicativos da web, usamos pré-carregadores para informar as animações e manter os usuários entretidos enquanto as operações do servidor estão sendo processadas. Por mais simples que pareça, é uma ferramenta crítica para construir e reter sua base de usuários.
Há muitos benefícios em criar uma tela inicial no React Native. Imagine, por exemplo, que você está pré-carregando dados de uma API. Você vai querer mostrar um carregador enquanto o usuário está esperando; mostrar um carregador assim que o aplicativo é iniciado ajuda a apresentar uma tela organizada e bem projetada para o usuário enquanto ele espera a inicialização do aplicativo.
Exemplo de tela inicial do React Native
Para esta demonstração react-native-splash-screen , construiremos uma tela inicial para Android e iOS. O tutorial irá orientá-lo sobre como preparar os tamanhos de imagem corretos, atualizar os arquivos necessários e ocultar a tela inicial durante o carregamento do aplicativo. O aplicativo concluído será semelhante à captura de tela abaixo:
Para acompanhar este tutorial da tela inicial do React Native, você deve ter:
- Familiaridade com CSS, HTML, Javascript (ES6)
- Node.js e Watchman instalados em sua máquina de desenvolvimento
- Simulador de iOS ou emulador de Android para teste
- Um editor de código instalado em sua máquina de desenvolvimento (por exemplo, VS Code)
- Uma compreensão básica do React/React Native
Vamos começar!
Por que o tamanho da imagem é importante
Criar uma tela inicial para um aplicativo móvel é um pouco complicado e você não quer correr o risco de ter problemas de exibição em alguns dispositivos devido a inconsistências nas resoluções da tela inicial. Por exemplo, os requisitos do dispositivo Android são totalmente diferentes dos do iOS. Os designers mais experientes podem criar as resoluções de tela inicial necessárias para ambos os dispositivos do zero.
No entanto, existem muitas ferramentas de terceiros disponíveis que podem ajudá-lo a criar uma tela inicial para Android e iOS. Neste tutorial, usaremos o App Icon Generator , uma plataforma online para criar ícones e imagens para aplicativos Android e iOS.
Antes de prosseguir, certifique-se de ter uma imagem de alta definição de 2.000 por 3.000 pixels (72 PPI) pronta. Você pode clonar o arquivo inicial para esses tutoriais no GitHub .
Como construir uma tela inicial no React Native
Primeiro, vá para Appicon . Arraste sua imagem na caixa fornecida, selecione 4x como seu tamanho base, selecione iOS e Android e clique em gerar. Esse processo deve levar aproximadamente dois minutos para ser concluído, dependendo da velocidade da sua internet.
Em seguida, extraia o arquivo baixado e copie a pasta iOS e Android para a pasta de imagem localizada no diretório de ativos do projeto inicial que você clonou.
Construir uma tela inicial no React Native requer alguns ajustes. Para começar, se você estiver usando um Mac, execute npm i react-native-splash-screen --save em seu terminal (execute o prompt de comando se estiver usando o Windows). cd no diretório iOS e execute pod install . Em seguida, cd de volta ao diretório raiz do projeto.
iOS
Abra AppDelegate.m e substitua o código pelo código abaixo:
#import"AppDelegate.h" #import#import #import //Importar RNSplashScreen #import"RNSplashScreen.h" #ifdef FB_SONARKIT_ENABLED #import #import #import #import #import #import static void InitializeFlipper (aplicativo UIApplication *) { FlipperClient * client=[FlipperClient sharedClient]; SKDescriptorMapper * layoutDescriptorMapper=[[SKDescriptorMapper alloc] initWithDefaults]; [cliente addPlugin: [[FlipperKitLayoutPlugin aloc] initWithRootNode: aplicativo comDescriptorMapper: layoutDescriptorMapper]]; [cliente addPlugin: [[FKUserDefaultsPlugin aloc] initWithSuiteName: nil]]; [cliente addPlugin: [FlipperKitReactPlugin novo]]; [cliente addPlugin: [[FlipperKitNetworkPlugin aloc] initWithNetworkAdapter: [SKIOSNetworkAdapter novo]]]; [início do cliente]; } #fim se @implementation AppDelegate -(BOOL) aplicativo: (UIApplication *) aplicativo didFinishLaunchingWithOptions: (NSDictionary *) launchOptions { #ifdef FB_SONARKIT_ENABLED InitializeFlipper (aplicativo); #fim se RCTBridge * bridge=[[RCTBridge alloc] initWithDelegate: self launchOptions: launchOptions]; RCTRootView * rootView=[[RCTRootView alloc] initWithBridge: bridge moduleName: @"MySplashScreen" initialProperties: nil]; rootView.backgroundColor=[[UIColor alloc] initWithRed: 1.0f verde: 1.0f azul: 1.0f alfa: 1]; self.window=[[UIWindow alloc] initWithFrame: [UIScreen mainScreen].bounds]; UIViewController * rootViewController=[UIViewController novo]; rootViewController.view=rootView; self.window.rootViewController=rootViewController; [self.window makeKeyAndVisible]; //Defina a tela inicial para mostrar por padrão. [RNSplashScreen show]; retornar SIM; } -(NSURL *) sourceURLForBridge: (RCTBridge *) ponte { #if DEBUG return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot: @"index"fallbackResource: nil]; #outro return [[NSBundle mainBundle] URLForResource: @"main"withExtension: @"jsbundle"]; #fim se } @fim
Aqui, fizemos duas alterações significativas no arquivo AppDeligate . Primeiro, importamos o RNSplashScreen que instalamos anteriormente no AppDeligate.m . Em seguida, definimos RNSplashScreen para mostrar por padrão com o código [RNSplashScreen show] .
Abra a área de trabalho do projeto no Xcode , clique em images.xcassets , clique com o botão direito abaixo do Appicon e escolha sua imagem. Defina o nome da imagem como LaunchScreen , abra a pasta de ativos, navegue até a pasta Imagens e abra a pasta iOS . Dentro da pasta inicial, arraste as três imagens sobre as três caixas no Xcode chamadas 1x, 2x, 3x :
A seguir, selecione LaunchScreen.storyboard . Em Exibir , selecione os rótulos SplashScreen e “Powered by React Native” e pressione delete no teclado. Selecione a vista e clique no ícone da régua. Desmarque “Guia de layout de área segura” e clique no ícone de adição + para pesquisar uma imagem. Arraste a visualização da imagem para a visualização. Finalmente, clique no ícone de restrições e defina todas as restrições para 0 :
Agora que configuramos a visualização da imagem, clique no ícone de propriedade da imagem e altere a imagem para LaunchScreen . Defina o mod de conteúdo como preenchimento de aspecto , conforme mostrado abaixo:
Para confirmar se seu aplicativo pode ser executado com sucesso, execute uma compilação do Xcode . Você deve ver algo assim:
Android
Agora vamos demonstrar como construir uma tela inicial para Android no React Native.
Navegue até a pasta Android , selecione app , src, main , java e abra MainActivity.java . Substitua o código pelo código abaixo:
package com.mysplashscreen;
import android.os.Bundle;//aqui
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen;//aqui
public class MainActivity extends ReactActivity { /** * Retorna o nome do componente principal registrado em JavaScript. Isso é usado para agendar * renderização do componente. */ @Sobrepor protected String getMainComponentName () { return"MySplashScreen"; } @Sobrepor protected void onCreate (Bundle savedInstanceState) { SplashScreen.show (this);//aqui super.onCreate (savedInstanceState); }
}
Em seguida, crie um arquivo chamado launch_screen.xml em app/src/main/res/layout (crie a pasta layout se não existe). Adicione o código abaixo ao launch_screen.xml :
Copie todos os ativos de Android para a pasta res . Crie cores.xml na pasta de valores e adicione uma cor chamada primary_dark em app/src/main/res/values /colors.xml .
# 000000
Abra a pasta Android no Android Studio , abra o AVD e execute seu aplicativo conforme mostrado abaixo. Se tudo estiver configurado corretamente, você deverá ver um resultado semelhante à seguinte captura de tela:
Por último, para ocultar a tela inicial durante o carregamento do aplicativo, você precisará fazer duas coisas:
- Importe o pacote
react-native-splash-screenpara o componente raiz (App.js) de seu aplicativo React Native - Use
React.useEffect ()para ocultar a tela inicial com o código abaixo:/** * Amostra de aplicativo nativo React * https://github.com/facebook/react-native * * @format * @flow strict-local */ import React from'react'; import { TouchableOpacity, View } de'react-native'; importar {NavigationContainer, DefaultTheme} de'@ react-navigation/native'; //Importar a tela inicial react-nativa. importar SplashScreen de"react-native-splash-screen"; import {Login} de"./screens"; tema const={ ...Tema Padrão, cores: { ... DefaultTheme.colors, borda:"transparente", } } const App=()=> { //Oculta a tela inicial ao carregar o aplicativo. React.useEffect (()=> { SplashScreen.hide (); }); Retorna ( ); }; exportação padrão ()=> { Retorna ; };
Conclusão
Praticamente qualquer aplicativo móvel precisa de uma tela inicial. Saber como construir uma tela inicial para aplicativos de plataforma cruzada é uma habilidade fundamental que pode ajudá-lo a dar um passo à frente em sua carreira de desenvolvimento móvel.
A postagem Construindo uma tela inicial no React Native apareceu primeiro no LogRocket Blog .
