1
00:00:02,410 --> 00:00:07,890
Então, de volta ao código, começamos a exibir algumas visualizações aqui e, é claro, no momento, isso não funcionará,

2
00:00:07,900 --> 00:00:13,930
isso apenas quebrará ou não renderizará nada significativo à tela. Nessa primeira visualização aninhada aqui, neste bloco,

3
00:00:13,930 --> 00:00:14,920
fui

4
00:00:14,920 --> 00:00:21,330
ter uma entrada de texto e um botão. Convenientemente, ambos são fornecidos pelo React Native, temos uma entrada de

5
00:00:21,330 --> 00:00:27,390
texto aqui e também temos um componente de botão. Assim, podemos importar as duas entradas de texto que

6
00:00:27,390 --> 00:00:33,510
permitem ao usuário inserir texto e botão e, aqui, nessa visualização, nessa primeira visualização aninhada, adicionarei uma entrada de

7
00:00:33,510 --> 00:00:40,890
texto como uma tag de fechamento automático, porque não há nada que possamos passar entre a abertura e tags de fechamento e para o

8
00:00:40,890 --> 00:00:42,440
botão, você pode pensar

9
00:00:42,450 --> 00:00:47,430
em usar um botão como esse, mas, na verdade, não é assim que esse botão React

10
00:00:47,430 --> 00:00:47,960
Native

11
00:00:47,970 --> 00:00:53,620
funciona. Em vez disso, é um botão de fechamento automático e você define uma propriedade de título para

12
00:00:53,840 --> 00:01:00,150
definir qual texto renderizar lá e aqui, poderíamos dizer adicionar. Agora temos uma entrada de texto e um

13
00:01:00,360 --> 00:01:08,230
botão lá e, se salvarmos isso e isso recarregar, vemos o botão aqui, mas não vemos a entrada de texto, certo?

14
00:01:08,490 --> 00:01:11,070
Portanto, isso não está funcionando como planejado.

15
00:01:11,070 --> 00:01:16,850
O motivo disso é que a entrada de texto ficará oculta aqui abaixo da barra de status.

16
00:01:16,920 --> 00:01:22,740
Agora é o momento em que devemos começar a adicionar layout, alguma estrutura a

17
00:01:22,770 --> 00:01:25,410
esta página, porque apenas adicionar

18
00:01:25,410 --> 00:01:30,990
componentes não funcionará, um aplicativo React Native trata de usar componentes e, em

19
00:01:31,080 --> 00:01:40,190
seguida, adicionar o layout certo, o direito estrutura para seus componentes. Por exemplo, aqui, por exemplo, faria sentido adicionar algum preenchimento geral em torno dessa

20
00:01:40,190 --> 00:01:46,310
visualização, portanto, nessa visualização superior, o preenchimento está basicamente a alguma distância da borda dessa visualização, que é basicamente

21
00:01:46,760 --> 00:01:48,870
o quadro do dispositivo no nosso caso

22
00:01:48,920 --> 00:01:54,890
aqui, já que estou falando sobre a visualização mais alta do conteúdo da visualização, portanto, algum espaçamento entre as

23
00:01:54,980 --> 00:02:00,650
bordas da parte superior da visualização circundante e do conteúdo da visualização e, para isso, podemos adicionar a

24
00:02:00,650 --> 00:02:02,660
propriedade style aqui na visualização.

25
00:02:02,660 --> 00:02:09,530
A maioria dos componentes do React Native suporta a propriedade style, e a visualização suporta. Além disso, você usa essa

26
00:02:10,070 --> 00:02:15,800
ligação de conteúdo dinâmico aqui, que você conhece do React normal também com os únicos chavetas

27
00:02:15,800 --> 00:02:21,590
e o estilo espera um objeto Javascript agora. Portanto, adicionamos outro par de chaves aqui e agora

28
00:02:21,590 --> 00:02:25,530
um erro comum é que você acha que essa é uma sintaxe especial

29
00:02:25,670 --> 00:02:31,390
que requer chaves duplas; na verdade, é a sintaxe normal do React com chaves semelhante, onde o valor dinâmico

30
00:02:31,400 --> 00:02:34,640
que você está passando para o estilo passa a ser um

31
00:02:34,640 --> 00:02:40,310
objeto Javascript, portanto, temos outro par de chaves. E nesse objeto, agora você pode ter pares

32
00:02:40,310 --> 00:02:46,610
de valores-chave em que as chaves são seus nomes de propriedades de estilo e os valores são os valores dessas

33
00:02:47,420 --> 00:02:51,740
propriedades de estilo e esses nomes de propriedades de estilo são influenciados pelo CSS.

34
00:02:51,770 --> 00:02:58,250
Então, aqui, o que você pode fazer é adicionar o preenchimento, que também existe no React Native, e

35
00:02:58,250 --> 00:03:04,130
uma lista abrangente de propriedades de estilo suportadas sempre pode ser encontrada acessando o componente que

36
00:03:04,130 --> 00:03:10,850
você está usando, como a visualização aqui e clicando em na propriedade style e aqui, se você clicar em view

37
00:03:10,850 --> 00:03:17,750
styles, verá uma lista de todas as propriedades fornecidas que podem ser usadas e algumas propriedades especiais para a view

38
00:03:17,750 --> 00:03:24,410
aqui e, em seguida, alguns adereços gerais, como adereços de layout e outros, você encontraria o preenchimento, por exemplo.

39
00:03:24,480 --> 00:03:30,640
É assim que você pode descobrir o que é suportado, mas também verá muitos exemplos ao longo deste curso.

40
00:03:30,650 --> 00:03:36,080
Então, aqui, adiciono preenchimento e o valor agora pode ser apenas um número que será pixels independentes do

41
00:03:36,290 --> 00:03:41,300
dispositivo, portanto, um valor de pixel que sempre fica bom, independentemente do tamanho do dispositivo.

42
00:03:41,330 --> 00:03:46,990
Então, aqui, podemos adicionar 10 e, se fizermos isso, agora vemos o botão um pouco mais abaixo, talvez

43
00:03:47,050 --> 00:03:51,860
adicionemos 30 aqui para que possamos ver uma diferença maior e agora isso está funcionando

44
00:03:52,090 --> 00:03:56,050
e agora, se você tocar acima do botão, você realmente não vê

45
00:03:56,050 --> 00:04:01,230
uma entrada aqui, mas vê que meu teclado virtual foi aberto no Android, no iOS não

46
00:04:01,240 --> 00:04:03,790
é aberto por padrão, mas também é

47
00:04:03,970 --> 00:04:11,410
possível tocar aqui e se você tocar com bastante frequência ou se for para hardware, o teclado que alterna o teclado do software,

48
00:04:11,410 --> 00:04:13,780
deve abrir lá também, então aqui também

49
00:04:13,780 --> 00:04:15,180
temos uma entrada.

50
00:04:15,190 --> 00:04:19,840
Então agora podemos ver essa entrada porque agora ela não está mais atrás dessa barra de status.

51
00:04:19,840 --> 00:04:27,040
Portanto, adicionar esse preenchimento provavelmente fazia sentido, porque agora garantimos que nosso layout esteja dentro

52
00:04:27,040 --> 00:04:28,660
da tela aqui.

53
00:04:28,660 --> 00:04:31,980
Agora, existem outras ferramentas para garantir o preenchimento suficiente aqui, mas,

54
00:04:32,170 --> 00:04:36,460
por enquanto, vamos definir manualmente o preenchimento e, talvez, defini-lo com um valor de 30.

55
00:04:36,880 --> 00:04:39,760
Então, estávamos começando o layout, agora vamos

56
00:04:39,760 --> 00:04:43,650
voltar a esse componente e garantir que possamos ver algo,

57
00:04:43,660 --> 00:04:48,120
podemos ver que há uma entrada de texto e não precisamos adivinhar.

58
00:04:48,550 --> 00:04:54,070
Para isso, podemos acessar a entrada de texto e, por exemplo, adicionar o espaço reservado prop e, assim

59
00:04:54,070 --> 00:04:55,800
como antes, para descobrir o que

60
00:04:55,810 --> 00:05:02,990
você pode definir, você sempre pode acessar os documentos oficiais, neste caso, os documentos de entrada de texto e, você encontra uma descrição de

61
00:05:03,000 --> 00:05:04,930
como usá-lo e alguns exemplos, mas

62
00:05:05,070 --> 00:05:10,770
se você rolar para baixo, também encontrará todos os acessórios que pode definir e, por exemplo, descobrirá que pode

63
00:05:11,130 --> 00:05:16,410
definir um acessório de espaço reservado, que é aquele texto fictício que é mostrado antes do usuário

64
00:05:16,410 --> 00:05:17,640
digitar algum texto.

65
00:05:17,640 --> 00:05:23,580
Então, aqui, isso requer uma string e aqui podemos inserir a meta do curso, porque você

66
00:05:23,580 --> 00:05:24,940
deve definir sua

67
00:05:25,040 --> 00:05:28,970
meta aqui e, se fizer isso, verá no Android e no

68
00:05:28,980 --> 00:05:31,510
iOS esse texto da meta do curso.

69
00:05:31,510 --> 00:05:33,590
Agora, ainda assim, poderia ser

70
00:05:33,600 --> 00:05:39,180
um pouco melhor, poderia ser um pouco mais claro que existe uma entrada de texto e,

71
00:05:39,210 --> 00:05:40,170
portanto, aqui,

72
00:05:40,170 --> 00:05:48,170
adicionarei um estilo, outro estilo embutido e aqui configurarei a cor da borda inferior do preto, preto agora é uma string, esses atalhos

73
00:05:48,180 --> 00:05:53,940
de cores são suportados no React Native e uma lista abrangente de todas as cores disponíveis

74
00:05:54,870 --> 00:06:01,860
está anexada a esta palestra aqui e também posso ver que uma largura inferior da borda digamos 1 e o

75
00:06:01,860 --> 00:06:07,770
que isso faz é definir um fundo delimite essa entrada para que agora, se voltarmos, temos o

76
00:06:07,770 --> 00:06:13,710
sublinhado aqui, podemos vê-la claramente no iOS e, como ainda não há muito espaço no iOS, deixe-me

77
00:06:13,710 --> 00:06:17,520
aumentar esse preenchimento aqui para 50, talvez, Sim, isso parece melhor.

78
00:06:17,540 --> 00:06:22,630
Então agora temos essa borda abaixo da nossa entrada e isso deixa claro que há uma entrada aqui.

79
00:06:22,810 --> 00:06:26,380
É claro que você não está restrito a definir apenas uma borda na parte

80
00:06:26,380 --> 00:06:28,640
inferior; você também pode definir uma borda

81
00:06:28,660 --> 00:06:32,140
geral, deixando de fora a parte inferior aqui, uma cor de borda e

82
00:06:32,530 --> 00:06:36,180
uma largura de borda; se você fizer isso, isso será cercado por um fronteira.

83
00:06:36,190 --> 00:06:42,250
Agora, uma observação importante sobre esses nomes de estilo aqui, nomes de propriedades de estilo, é claro que

84
00:06:42,250 --> 00:06:49,390
você vê que é a largura da borda, a cor da borda escrita assim, em CSS normal, você teria a cor da

85
00:06:49,750 --> 00:06:55,870
borda e aplicaria a cor da borda, mas isso ser um nome de propriedade inválido em Javascript, motivo pelo

86
00:06:55,870 --> 00:06:57,670
qual isso não é suportado.

87
00:06:57,670 --> 00:07:03,280
Agora, na verdade, um nome de propriedade válido em Javascript seria se você o incluir entre

88
00:07:03,520 --> 00:07:10,240
aspas, mas mesmo isso não seja suportado no React Native, portanto, essas sintaxes alternativas, por exemplo, essa sintaxe funcionariam em

89
00:07:10,240 --> 00:07:18,010
Javascript se você aplicar algum estilo ao elemento HTML da Web , porém, essas sintaxes não são suportadas no React Native. Lá, você

90
00:07:18,010 --> 00:07:23,320
realmente precisa usar esta sintaxe de camelo, onde você escreve, por exemplo, cores de bordas

91
00:07:23,320 --> 00:07:29,740
como essa ou, em resumo, deve usar os nomes de propriedades que também encontra nos documentos oficiais. não existem

92
00:07:29,740 --> 00:07:37,030
nomes alternativos para essas propriedades de estilo e agora também podemos adicionar um preenchimento, digamos 10, para que tenhamos algum espaçamento entre

93
00:07:37,600 --> 00:07:43,570
a borda e a parte real em que inserimos algo e eu diria que isso já parece

94
00:07:43,720 --> 00:07:49,540
muito melhor e nós podemos ver claramente que aqui temos uma entrada na qual os usuários podem

95
00:07:49,540 --> 00:07:50,530
inserir algo.