Portanto, em uma nova tela de local, quero poder adicionar um local e, para isso,
primeiro adicionarei o componente de entrada de texto que, obviamente, não tem nada a ver com os
recursos nativos do dispositivo, mas também precisamos disso porque, em lá, agora podemos adicionar uma entrada de texto que permita ao usuário digitar o
título e, portanto, também adicionarei um componente de texto aqui onde digo título, que deve atuar como
um rótulo para
essa entrada de texto aqui e no geral, também quero uma visualização de rolagem aqui para agrupar todo o meu conteúdo, porque não sei
qual dispositivo o usuário usará, mas adicionaremos mais do que apenas um título, também adicionaremos um
seletor de imagens e um seletor de local este módulo e, portanto, poder rolar esta página é realmente importante.
Portanto, agora temos o rótulo do título e a entrada de texto que pertence a ele, que por enquanto não fará
nada, mas que em breve permitirá que o usuário insira um título.
Também quero ter certeza de que esse formulário possa ser enviado,
é claro, o que também quero fazer é adicionar um componente de botão aqui e, após a entrada de texto, terei meu botão
onde digo salvar espaço para Por exemplo, adicione uma cor aqui e defina-a em Cores. primário e, para isso, você precisa importar as
cores constantes aqui e o onPress posteriormente enviará este formulário,
por enquanto não estou fazendo nada aqui.
A entrada de texto, é claro, também pode ser configurada, embora a
configuração mais básica seja boa aqui, não preciso alterar o tipo
de teclado, etc.
Portanto, para esta visualização aqui, por exemplo, quero adicionar um estilo de formulário aqui, para um identificador de estilo, para que
eu possa estilizar o formulário geral. Para o título
aqui, adicionarei um estilo de rótulo e para a entrada de texto, também quero adicionar meus próprios estilos e usarei a
entrada de texto identificadora aqui. Com isso, vamos para a folha de
estilo e certifique-se de adicionar um pouco de estilo aqui. Para o formulário geral, adicionarei uma margem
em todas as direções de 30 para que não fique diretamente nas bordas da tela.
Para o rótulo,
quero definir um tamanho de fonte digamos 18 e também adicionar uma margem na parte inferior de 15 para que tenhamos algum
espaçamento entre o rótulo e a entrada de texto e na própria entrada
de texto, para que seja possível capaz de vê-lo, vou adicionar uma borda inferior e definir sua cor para
este cinza claro aqui com este código hexadecimal de #ccc e uma largura inferior da borda aqui de 1 e também ter uma margem
na parte inferior, para o conteúdo abaixo dele, o botão agora com 15 anos e o que também
adicionarei aqui é um pouco de preenchimento vertical, apenas quatro e um pouco de
preenchimento horizontal, apenas dois. Se eu salvar isso, vamos dar uma olhada.
Se eu for para a tela de novos locais, é isso que eu tenho e isso não parece
muito ruim, também no Android, isso é algo com o qual podemos trabalhar, acho, e é com isso que podemos construir.
Agora, é claro, essa entrada não está
fazendo nada, é claro que quero capturar o que o usuário digitou e manter isso simples, aqui não adicionarei validação
super complexa ou algo assim,
em vez disso, capturarei o valor e é isso. É claro que você pode adicionar validação, adicionar
um redutor,
como fizemos no módulo de entrada do usuário, onde aprendeu como gerenciar formas mais
complexas de todas as formas; aqui, novamente, manterei isso muito simples e, portanto, apenas importarei o gancho de estado de uso
de React aqui para que eu possa capturar meus valores aqui.
Então, aqui, terei meu valor de título e defino a função de valor de título e usarei use state para inicializar isso
em uma string vazia. Em seguida, adicionarei uma função aqui,
o manipulador de alteração de título, que recebe o texto que o usuário digitou e onde l
Depois, basta definir meu valor de título para esse texto e, é claro, você pode adicionar validação, mas, novamente, para simplificar, não farei
isso.
É o manipulador de mudança de título que agora deve estar vinculado ao suporte de texto on change aqui, na entrada
de texto;
portanto, apontarei para o manipulador de mudança de título e ligarei o valor dessa entrada, é claro, ao meu valor de título, porque
é onde eu armazeno a entrada do usuário e, com
isso, temos uma entrada do usuário totalmente funcional aqui, onde também capturo os valores. Agora, com isso, conseguimos o título,
também temos um lugar
para salvar.
Sempre que pressionarmos esse botão, eu quero
salvá-lo, para que eu tenha meu manipulador de lugar de salvamento, que é uma função que eu quero
vincular a esse
botão de lugar de salvamento. Portanto, aqui, em vez de ter essa função anônima vazia, aponto para salvar coloque
o manipulador neste botão Salvar local e agora quero garantir que este local seja
salvo e, por isso, usarei novamente o Redux.
Então, instalarei o Redux com o npm install --save redux e também o React Redux e também instalarei o Redux
Thunk para que possamos usá-lo também.
Por enquanto não preciso disso porque não estou falando com um servidor, mas mais tarde,
quando adicionarmos recursos nativos de dispositivos, você verá que também temos alguns recursos assíncronos
e onde podemos esperar a conclusão antes na verdade, despachamos uma ação que é exatamente onde
o Redux Thunk pode nos ajudar. Portanto, com esses três pacotes instalados, agora podemos configurar o Redux.