Então, de volta ao código, começamos a exibir algumas visualizações aqui e, é claro, no momento, isso não funcionará,
isso apenas quebrará ou não renderizará nada significativo à tela. Nessa primeira visualização aninhada aqui, neste bloco,
fui
ter uma entrada de texto e um botão. Convenientemente, ambos são fornecidos pelo React Native, temos uma entrada de
texto aqui e também temos um componente de botão. Assim, podemos importar as duas entradas de texto que
permitem ao usuário inserir texto e botão e, aqui, nessa visualização, nessa primeira visualização aninhada, adicionarei uma entrada de
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
botão, você pode pensar
em usar um botão como esse, mas, na verdade, não é assim que esse botão React
Native
funciona. Em vez disso, é um botão de fechamento automático e você define uma propriedade de título para
definir qual texto renderizar lá e aqui, poderíamos dizer adicionar. Agora temos uma entrada de texto e um
botão lá e, se salvarmos isso e isso recarregar, vemos o botão aqui, mas não vemos a entrada de texto, certo?
Portanto, isso não está funcionando como planejado.
O motivo disso é que a entrada de texto ficará oculta aqui abaixo da barra de status.
Agora é o momento em que devemos começar a adicionar layout, alguma estrutura a
esta página, porque apenas adicionar
componentes não funcionará, um aplicativo React Native trata de usar componentes e, em
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
visualização, portanto, nessa visualização superior, o preenchimento está basicamente a alguma distância da borda dessa visualização, que é basicamente
o quadro do dispositivo no nosso caso
aqui, já que estou falando sobre a visualização mais alta do conteúdo da visualização, portanto, algum espaçamento entre as
bordas da parte superior da visualização circundante e do conteúdo da visualização e, para isso, podemos adicionar a
propriedade style aqui na visualização.
A maioria dos componentes do React Native suporta a propriedade style, e a visualização suporta. Além disso, você usa essa
ligação de conteúdo dinâmico aqui, que você conhece do React normal também com os únicos chavetas
e o estilo espera um objeto Javascript agora. Portanto, adicionamos outro par de chaves aqui e agora
um erro comum é que você acha que essa é uma sintaxe especial
que requer chaves duplas; na verdade, é a sintaxe normal do React com chaves semelhante, onde o valor dinâmico
que você está passando para o estilo passa a ser um
objeto Javascript, portanto, temos outro par de chaves. E nesse objeto, agora você pode ter pares
de valores-chave em que as chaves são seus nomes de propriedades de estilo e os valores são os valores dessas
propriedades de estilo e esses nomes de propriedades de estilo são influenciados pelo CSS.
Então, aqui, o que você pode fazer é adicionar o preenchimento, que também existe no React Native, e
uma lista abrangente de propriedades de estilo suportadas sempre pode ser encontrada acessando o componente que
você está usando, como a visualização aqui e clicando em na propriedade style e aqui, se você clicar em view
styles, verá uma lista de todas as propriedades fornecidas que podem ser usadas e algumas propriedades especiais para a view
aqui e, em seguida, alguns adereços gerais, como adereços de layout e outros, você encontraria o preenchimento, por exemplo.
É assim que você pode descobrir o que é suportado, mas também verá muitos exemplos ao longo deste curso.
Então, aqui, adiciono preenchimento e o valor agora pode ser apenas um número que será pixels independentes do
dispositivo, portanto, um valor de pixel que sempre fica bom, independentemente do tamanho do dispositivo.
Então, aqui, podemos adicionar 10 e, se fizermos isso, agora vemos o botão um pouco mais abaixo, talvez
adicionemos 30 aqui para que possamos ver uma diferença maior e agora isso está funcionando
e agora, se você tocar acima do botão, você realmente não vê
uma entrada aqui, mas vê que meu teclado virtual foi aberto no Android, no iOS não
é aberto por padrão, mas também é
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,
deve abrir lá também, então aqui também
temos uma entrada.
Então agora podemos ver essa entrada porque agora ela não está mais atrás dessa barra de status.
Portanto, adicionar esse preenchimento provavelmente fazia sentido, porque agora garantimos que nosso layout esteja dentro
da tela aqui.
Agora, existem outras ferramentas para garantir o preenchimento suficiente aqui, mas,
por enquanto, vamos definir manualmente o preenchimento e, talvez, defini-lo com um valor de 30.
Então, estávamos começando o layout, agora vamos
voltar a esse componente e garantir que possamos ver algo,
podemos ver que há uma entrada de texto e não precisamos adivinhar.
Para isso, podemos acessar a entrada de texto e, por exemplo, adicionar o espaço reservado prop e, assim
como antes, para descobrir o que
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
como usá-lo e alguns exemplos, mas
se você rolar para baixo, também encontrará todos os acessórios que pode definir e, por exemplo, descobrirá que pode
definir um acessório de espaço reservado, que é aquele texto fictício que é mostrado antes do usuário
digitar algum texto.
Então, aqui, isso requer uma string e aqui podemos inserir a meta do curso, porque você
deve definir sua
meta aqui e, se fizer isso, verá no Android e no
iOS esse texto da meta do curso.
Agora, ainda assim, poderia ser
um pouco melhor, poderia ser um pouco mais claro que existe uma entrada de texto e,
portanto, aqui,
adicionarei um estilo, outro estilo embutido e aqui configurarei a cor da borda inferior do preto, preto agora é uma string, esses atalhos
de cores são suportados no React Native e uma lista abrangente de todas as cores disponíveis
está anexada a esta palestra aqui e também posso ver que uma largura inferior da borda digamos 1 e o
que isso faz é definir um fundo delimite essa entrada para que agora, se voltarmos, temos o
sublinhado aqui, podemos vê-la claramente no iOS e, como ainda não há muito espaço no iOS, deixe-me
aumentar esse preenchimento aqui para 50, talvez, Sim, isso parece melhor.
Então agora temos essa borda abaixo da nossa entrada e isso deixa claro que há uma entrada aqui.
É claro que você não está restrito a definir apenas uma borda na parte
inferior; você também pode definir uma borda
geral, deixando de fora a parte inferior aqui, uma cor de borda e
uma largura de borda; se você fizer isso, isso será cercado por um fronteira.
Agora, uma observação importante sobre esses nomes de estilo aqui, nomes de propriedades de estilo, é claro que
você vê que é a largura da borda, a cor da borda escrita assim, em CSS normal, você teria a cor da
borda e aplicaria a cor da borda, mas isso ser um nome de propriedade inválido em Javascript, motivo pelo
qual isso não é suportado.
Agora, na verdade, um nome de propriedade válido em Javascript seria se você o incluir entre
aspas, mas mesmo isso não seja suportado no React Native, portanto, essas sintaxes alternativas, por exemplo, essa sintaxe funcionariam em
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ê
realmente precisa usar esta sintaxe de camelo, onde você escreve, por exemplo, cores de bordas
como essa ou, em resumo, deve usar os nomes de propriedades que também encontra nos documentos oficiais. não existem
nomes alternativos para essas propriedades de estilo e agora também podemos adicionar um preenchimento, digamos 10, para que tenhamos algum espaçamento entre
a borda e a parte real em que inserimos algo e eu diria que isso já parece
muito melhor e nós podemos ver claramente que aqui temos uma entrada na qual os usuários podem
inserir algo.