Melhore a IU móvel com React Native safe-area-context

Ao construir um aplicativo móvel, um desenvolvedor deve garantir repetidamente que o conteúdo seja renderizado corretamente em diferentes tipos de telas. Demorado e sujeito a erros, podemos simplificar esse processo usando ferramentas como a API de contexto de área segura do React Native .

Neste tutorial, usaremos o contexto de área segura para posicionar o conteúdo da página da web em torno de figuras irregulares em um aplicativo móvel, por exemplo, barras de status, indicadores iniciais e entalhes. Para acompanhar este tutorial, você deve estar familiarizado com React Native e React Hooks. Vamos começar!

Observação: para acompanhar, você pode verificar o completo base de código do aplicativo de lista de tarefas usado neste artigo

Limitações da IU móvel

Vamos supor que você construiu o seguinte aplicativo React Native que adiciona e remove itens de uma lista de tarefas:

Nosso aplicativo de lista de tarefas é funcional e bastante fácil de usar. Em uma visualização da web, nosso aplicativo não pareceria anormal. No entanto, você notará rapidamente vários problemas com a IU móvel. Por exemplo, se um usuário tentasse visualizar o aplicativo no modo paisagem, encontraria o seguinte erro:

Quando um usuário vira o telefone e tenta usar o modo paisagem, o cabeçalho do nosso aplicativo fica parcialmente bloqueado devido às dimensões da tela do celular.

Ao adaptar um aplicativo da web para as dimensões da tela do celular, é muito comum para certos elementos sejam bloqueados ou distorcidos por elementos de interface móvel. Vamos melhorar a renderização visual de nosso elemento de cabeçalho usando a API de contexto de área segura.

Começando com contexto de área segura

Primeiro, instalaremos área de segurança-contexto em nosso projeto. Navegue até o projeto raiz da sua pasta e execute o comando abaixo:

npm install react-native-safe-area-context

Se você estiver usando o React Native ≥v0.6.0, o safe-area-context irá ser automaticamente vinculado ao seu projeto. No entanto, se você estiver usando uma versão anterior do React Native, execute o seguinte comando na pasta raiz do seu projeto para vincular a biblioteca:

react-native link react-native-safe-area-context

O contexto da área segura usa dois componentes para interagir com os componentes do React Native, Providers e Consumers, que têm um relacionamento pai-filho. Os consumidores nos permitem usar os valores disponibilizados pelo Provedor mais próximo.

Na biblioteca de contexto de área segura, apenas um componente, SafeAreaProvider, atua como Provedor. Vamos envolver o componente raiz de nosso aplicativo com o componente SafeAreaProvider, que fornecerá o valor ou estilos de qualquer elemento do sistema que se sobrepõe aos consumidores descendentes.

Adicione o código abaixo ao App.js:

importar React de”react”; import {Text, View, StyleSheet, ScrollView, TouchableOpacity, KeyboardAvoidingView} de”react-native”; importar {SafeAreaView, SafeAreaProvider} de”react-native-safe-area-context”; importar tarefas de”./components/Tasks”; função padrão de exportação App () {const [tarefa, setTask]=useState (); const [taskItems, setTaskItems]=useState ([]); const handleAddTask=()=> {Keyboard.dismiss (); setTaskItems ([… taskItems, tarefa]); setTask (nulo); }; const completeTask=(index)=> {let itemsCopy=[… taskItems]; itemsCopy.splice (índice, 1); setTaskItems (itemsCopy); }; return ( Tarefas de hoje {/* É para onde irão as tarefas */} {taskItems.map ((item, index)=> {return ( completeTask (index)}> );})} {/* Escreva uma tarefa */} setTask (texto)}/> handleAddTask ()}> + ); }

A seguir, envolveremos qualquer elemento que prevemos que possa ser afetado por modificações na tela em dispositivos móveis com um componente Consumidor. Em nosso caso, envolvemos o componente filho Texto que contém o cabeçalho de nosso aplicativo de lista de tarefas com SafeAreaView, o componente consumidor principal em contexto de área segura:

//./App.js import React from”reagir”; import {Text, View, StyleSheet, ScrollView} de”react-native”; importar {SafeAreaView, SafeAreaProvider} de”react-native-safe-area-context”; exportar a função padrão App () {return ( … Tarefas de hoje … ); }

O SafeAreaView atua como um componente React Native View regular; no entanto, inclui preenchimento e margens adicionais, posicionando o componente fechado longe de quaisquer modificações na tela do celular.

O SafeAreaView inclui um suporte para bordas, permitindo que você para personalizar inserções de área segura em torno das bordas de seu componente. bordas leva os valores superior, direito, inferior e esquerdo, com todos como o padrão.

Vamos ver como o cabeçalho do nosso aplicativo é posicionado de forma diferente após adicionar o componente SafeAreaView:

No vídeo acima, o cabeçalho do nosso aplicativo está mais centralizado. O estilo extra fornecido pelo SafeAreaView impede que as modificações da tela móvel bloqueiem o cabeçalho, independentemente do tipo de dispositivo ou das dimensões da tela.

O contexto da área segura inclui testes integrados com Jest. Você pode ler mais sobre o teste nos documentos .

Otimizando a renderização com SafeAreaView

O componente SafeAreaView pode evitar atrasos na renderização quando um usuário gira o dispositivo. Além disso, o React Native usa uma propriedade Provider chamada initialWindowMetrics que você pode usar para acelerar a renderização inicial do seu aplicativo. Vamos adicionar initialWindowMetrics em App.js:

//./App.js import React from”react”; import {Text, View, StyleSheet, ScrollView} de”react-native”; importar {SafeAreaView, SafeAreaProvider, InitialWindowMetrics} de”react-native-safe-area-context”; exportar a função padrão App () {return ( … Tarefas de hoje {/* Incluir TextInput e botão para adicionar itens aqui */} ); }

A propriedade initialWindowsMetrics é especificada como a propriedade initialMetric. Esta propriedade só deve ser usada se o provedor de seu aplicativo não remontar ou se seu aplicativo não estiver usando Biblioteca do React Navigation .

Resumo

Manipular e gerenciar dados em aplicativos móveis pode ser um desafio em comparação com aplicativos da web. No entanto, ferramentas como o contexto de área segura fornecem um caminho para a construção de interfaces que se adaptam facilmente a diferentes telas de dispositivos móveis, fornecendo uma UX uniforme em diferentes dispositivos.

O contexto de área segura é fácil de usar simplesmente envolvendo elementos com o componente SafeAreaView. Embora os valores padrão sejam eficazes por si só, você pode adicionar valores personalizados ao preenchimento, margem e bordas conforme achar adequado para seu aplicativo. Espero que tenha gostado deste tutorial!