Agora há uma coisa extra ao criar aplicativos móveis para telefones modernos, podemos ver isso aqui no
iPhone que eu rodado tem esse entalhe aqui.
Certo.
E este nível pode, por vezes, sobrepor o seu conteúdo.
O mesmo é verdade para esta tela inicial barra de indicadores do Gerenciador de Tarefas aqui na parte inferior do iPhone.
Você vê que está sobrepondo nosso novo botão de jogo e sim, eu posso rolar para cima, mas ele volta e
está sempre acima desse botão.
Então, esses são elementos que fazem parte do sábio, o que pode distorcer nossa interface.
Por exemplo, se tivéssemos deixado o texto alinhado, ele poderia estar sobreposto por esse entalhe ou, nesse caso, é o botão da
tela inicial onde está.
Bem gerenciador de tarefas é que são barra indicadora está sobrepondo nosso conteúdo.
E, claro, isso não é apenas o caso dos iPhones.
Você poderia ter um problema semelhante em dispositivos Android.
Lá você também tem dispositivos com um entalhe ou com qualquer coisa assim.
Agora, para ter certeza de que seu aplicativo sempre fica bem em todos os dispositivos diferentes, o
React Native tem um componente especial que você pode usar para ajustar automaticamente seu conteúdo para ajustá-lo à
tela do dispositivo e respeitar marcações e outras coisas.
Por exemplo, aqui no jogo sobre tela onde eu tenho esse problema aqui no iPhone, podemos importar este
componente especial Reagir ofertas nativas e essa é a visão de área segura.
É assim chamado porque é uma visão de contorno que podemos colocar em torno de nosso conteúdo, que
está marcando a área segura na área em que podemos posicionar nosso conteúdo, porque não haverá problemas com entalhes e assim
por diante.
Agora, como você usa para salvar a área de.
Você simplesmente pega e envolve em seu conteúdo.
Assim, em torno da nossa visualização de rolagem, por exemplo, podemos envolver tudo isso na tela do jogo
com a visualização da área segura e isso é importante.
As exibições da Área Segura sempre devem envolver sua visualização superior.
Portanto, neste caso, esta visualização de rolagem aqui agora é tão segura.
Se voltarmos e passarmos pelo nosso jogo rapidinho aqui no iPhone inicie um novo jogo cinquenta e cinco é o número
e resolva isso então o
que você vê é algo interessante o assunto ficou ainda pior.
Bem, antes de tomarmos cuidado com isso, observe que essa barra de rolagem que você vê aqui à direita agora
está realmente recuada um pouco.
Não é totalmente à direita e isso já é uma visão segura da
área tendo algum efeito que adiciona algum preenchimento à esquerda e à direita para ter certeza de que respeitamos o entalhe
que ocuparia algum espaço lá e nos daria algum preenchimento que nosso conteúdo definitivamente não é sobreposto pelo entalhe.
Mas é claro que temos um problema lá embaixo.
A razão para isso é que eu não estou realmente usando a visualização da área de salvamento como a minha maior visão.
Então, vamos removê-lo de lá da tela do jogo, porque qual é a nossa visão de cima.
Bem, isso está no arquivo de xadrez do aplicativo no final.
Temos o nosso conteúdo desta visão aqui onde temos que encabeçar e depois o que o visualizador carregar.
Assim, por exemplo, o cabeçalho não faz parte da visualização da área de salvamento e definitivamente deveria ser.
Então, vamos importar a visualização da Área Segura aqui no arquivo de app jazz e vamos colocar essa view aqui com ela assim, agora com isso vamos
salvá-la
e vamos dar uma olhada num número com a espera para o aplicativo recarregar e o que
vemos é um vazio tela agora a solução é simples.
Vamos pegar o estilo que aplicamos a você e aplicar na área Salvar de você e agora se livrar dessa
outra visão.
Porque agora apenas substitui a nossa visão normal aqui e agora funciona e agora
vamos para o jogo novamente vamos rapidamente resolver isso
que você vê agora está morto aqui na parte inferior.
Agora temos um espaço extra entre isso.
Eu quero ir para a barra de gerenciador de tarefas aqui e o novo botão do jogo que nós não tínhamos antes.
Também temos o espaçamento à esquerda e a direita aqui para respeitar o entalhe para que isso nunca se sobreponha ao
conteúdo.
Nós podemos ter à esquerda lá e nós temos algum preenchimento extra bem no topo e no fundo.
Agora, é claro que o nosso cabeçalho não fica muito bonito com esse espaçamento extra aqui e isso é algo
que vamos cuidar no módulo de navegação ou realmente seremos cuidados para nós.
Nós não teremos que fazer muito lá, mas novamente isso não é algo com o qual precisamos nos preocupar.
Portanto, o que podemos nos preocupar, porém, é que nosso conteúdo é sempre visível e com a área
segura de você, você pode garantir que é.
Agora, isso não significa que você precisa incluir todo o seu conteúdo ou todo o aplicativo
em uma área segura, o tempo todo, como você verá no próximo módulo, quando falarmos sobre navegação em vários
aplicativos que você realmente usará uma biblioteca que cuida disso em muitos casos para você a biblioteca de navegação
usará lá.
Assim, em muitos aplicativos, porque a maioria dos seus aplicativos terá navegação, você não precisará gerenciar
apenas manualmente.
Mas se você estiver criando um aplicativo em que não tenha outra biblioteca que cuide disso como
este aplicativo, lembre-se de incluir o conteúdo em uma visualização de área de salvamento, caso contrário, o conteúdo será
sobreposto.