1
00:00:02,310 --> 00:00:09,750
Agora há uma coisa extra ao criar aplicativos móveis para telefones modernos, podemos ver isso aqui no

2
00:00:09,810 --> 00:00:13,880
iPhone que eu rodado tem esse entalhe aqui.

3
00:00:13,890 --> 00:00:14,520
Certo.

4
00:00:14,580 --> 00:00:19,380
E este nível pode, por vezes, sobrepor o seu conteúdo.

5
00:00:19,380 --> 00:00:26,010
O mesmo é verdade para esta tela inicial barra de indicadores do Gerenciador de Tarefas aqui na parte inferior do iPhone.

6
00:00:26,010 --> 00:00:32,280
Você vê que está sobrepondo nosso novo botão de jogo e sim, eu posso rolar para cima, mas ele volta e

7
00:00:32,370 --> 00:00:33,990
está sempre acima desse botão.

8
00:00:33,990 --> 00:00:40,370
Então, esses são elementos que fazem parte do sábio, o que pode distorcer nossa interface.

9
00:00:40,380 --> 00:00:47,310
Por exemplo, se tivéssemos deixado o texto alinhado, ele poderia estar sobreposto por esse entalhe ou, nesse caso, é o botão da

10
00:00:47,370 --> 00:00:48,930
tela inicial onde está.

11
00:00:49,290 --> 00:00:54,250
Bem gerenciador de tarefas é que são barra indicadora está sobrepondo nosso conteúdo.

12
00:00:54,660 --> 00:00:57,090
E, claro, isso não é apenas o caso dos iPhones.

13
00:00:57,090 --> 00:00:59,760
Você poderia ter um problema semelhante em dispositivos Android.

14
00:00:59,780 --> 00:01:04,080
Lá você também tem dispositivos com um entalhe ou com qualquer coisa assim.

15
00:01:04,140 --> 00:01:11,640
Agora, para ter certeza de que seu aplicativo sempre fica bem em todos os dispositivos diferentes, o

16
00:01:11,640 --> 00:01:19,680
React Native tem um componente especial que você pode usar para ajustar automaticamente seu conteúdo para ajustá-lo à

17
00:01:19,680 --> 00:01:23,830
tela do dispositivo e respeitar marcações e outras coisas.

18
00:01:23,850 --> 00:01:29,280
Por exemplo, aqui no jogo sobre tela onde eu tenho esse problema aqui no iPhone, podemos importar este

19
00:01:29,310 --> 00:01:33,750
componente especial Reagir ofertas nativas e essa é a visão de área segura.

20
00:01:34,080 --> 00:01:41,640
É assim chamado porque é uma visão de contorno que podemos colocar em torno de nosso conteúdo, que

21
00:01:41,780 --> 00:01:50,430
está marcando a área segura na área em que podemos posicionar nosso conteúdo, porque não haverá problemas com entalhes e assim

22
00:01:50,460 --> 00:01:51,660
por diante.

23
00:01:51,660 --> 00:01:53,770
Agora, como você usa para salvar a área de.

24
00:01:53,780 --> 00:01:57,590
Você simplesmente pega e envolve em seu conteúdo.

25
00:01:57,600 --> 00:02:04,710
Assim, em torno da nossa visualização de rolagem, por exemplo, podemos envolver tudo isso na tela do jogo

26
00:02:04,710 --> 00:02:08,660
com a visualização da área segura e isso é importante.

27
00:02:08,660 --> 00:02:12,640
As exibições da Área Segura sempre devem envolver sua visualização superior.

28
00:02:12,650 --> 00:02:17,170
Portanto, neste caso, esta visualização de rolagem aqui agora é tão segura.

29
00:02:17,180 --> 00:02:26,140
Se voltarmos e passarmos pelo nosso jogo rapidinho aqui no iPhone inicie um novo jogo cinquenta e cinco é o número

30
00:02:26,140 --> 00:02:28,480
e resolva isso então o

31
00:02:33,070 --> 00:02:38,200
que você vê é algo interessante o assunto ficou ainda pior.

32
00:02:38,200 --> 00:02:45,910
Bem, antes de tomarmos cuidado com isso, observe que essa barra de rolagem que você vê aqui à direita agora

33
00:02:45,910 --> 00:02:48,040
está realmente recuada um pouco.

34
00:02:48,040 --> 00:02:53,500
Não é totalmente à direita e isso já é uma visão segura da

35
00:02:53,500 --> 00:03:01,840
área tendo algum efeito que adiciona algum preenchimento à esquerda e à direita para ter certeza de que respeitamos o entalhe

36
00:03:01,840 --> 00:03:09,730
que ocuparia algum espaço lá e nos daria algum preenchimento que nosso conteúdo definitivamente não é sobreposto pelo entalhe.

37
00:03:09,730 --> 00:03:13,030
Mas é claro que temos um problema lá embaixo.

38
00:03:13,030 --> 00:03:18,040
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.

39
00:03:18,040 --> 00:03:22,930
Então, vamos removê-lo de lá da tela do jogo, porque qual é a nossa visão de cima.

40
00:03:23,020 --> 00:03:26,190
Bem, isso está no arquivo de xadrez do aplicativo no final.

41
00:03:26,230 --> 00:03:33,750
Temos o nosso conteúdo desta visão aqui onde temos que encabeçar e depois o que o visualizador carregar.

42
00:03:33,770 --> 00:03:39,100
Assim, por exemplo, o cabeçalho não faz parte da visualização da área de salvamento e definitivamente deveria ser.

43
00:03:39,110 --> 00:03:49,130
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

44
00:03:49,130 --> 00:03:49,550
salvá-la

45
00:03:52,480 --> 00:03:58,760
e vamos dar uma olhada num número com a espera para o aplicativo recarregar e o que

46
00:03:58,850 --> 00:04:02,750
vemos é um vazio tela agora a solução é simples.

47
00:04:02,780 --> 00:04:08,360
Vamos pegar o estilo que aplicamos a você e aplicar na área Salvar de você e agora se livrar dessa

48
00:04:08,380 --> 00:04:08,980
outra visão.

49
00:04:08,990 --> 00:04:15,090
Porque agora apenas substitui a nossa visão normal aqui e agora funciona e agora

50
00:04:15,180 --> 00:04:19,590
vamos para o jogo novamente vamos rapidamente resolver isso

51
00:04:23,720 --> 00:04:28,160
que você vê agora está morto aqui na parte inferior.

52
00:04:28,160 --> 00:04:30,960
Agora temos um espaço extra entre isso.

53
00:04:31,100 --> 00:04:36,700
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.

54
00:04:36,740 --> 00:04:42,350
Também temos o espaçamento à esquerda e a direita aqui para respeitar o entalhe para que isso nunca se sobreponha ao

55
00:04:42,350 --> 00:04:42,790
conteúdo.

56
00:04:42,800 --> 00:04:48,690
Nós podemos ter à esquerda lá e nós temos algum preenchimento extra bem no topo e no fundo.

57
00:04:48,770 --> 00:04:56,180
Agora, é claro que o nosso cabeçalho não fica muito bonito com esse espaçamento extra aqui e isso é algo

58
00:04:56,180 --> 00:05:01,270
que vamos cuidar no módulo de navegação ou realmente seremos cuidados para nós.

59
00:05:01,280 --> 00:05:05,690
Nós não teremos que fazer muito lá, mas novamente isso não é algo com o qual precisamos nos preocupar.

60
00:05:05,690 --> 00:05:11,460
Portanto, o que podemos nos preocupar, porém, é que nosso conteúdo é sempre visível e com a área

61
00:05:11,460 --> 00:05:14,210
segura de você, você pode garantir que é.

62
00:05:14,210 --> 00:05:20,050
Agora, isso não significa que você precisa incluir todo o seu conteúdo ou todo o aplicativo

63
00:05:20,060 --> 00:05:26,930
em uma área segura, o tempo todo, como você verá no próximo módulo, quando falarmos sobre navegação em vários

64
00:05:26,930 --> 00:05:33,800
aplicativos que você realmente usará uma biblioteca que cuida disso em muitos casos para você a biblioteca de navegação

65
00:05:33,830 --> 00:05:34,700
usará lá.

66
00:05:34,940 --> 00:05:39,980
Assim, em muitos aplicativos, porque a maioria dos seus aplicativos terá navegação, você não precisará gerenciar

67
00:05:39,980 --> 00:05:40,790
apenas manualmente.

68
00:05:40,940 --> 00:05:46,460
Mas se você estiver criando um aplicativo em que não tenha outra biblioteca que cuide disso como

69
00:05:46,460 --> 00:05:52,760
este aplicativo, lembre-se de incluir o conteúdo em uma visualização de área de salvamento, caso contrário, o conteúdo será

70
00:05:52,760 --> 00:05:53,420
sobreposto.