Um momento
Aula 13
Cursos / Introdução ao Redux com o React Native
Botão de Toque com o TouchableOpacity e Definição de Estilo com o StyleSheet do React Native

Summary

Resumo do Transcript

Neste transcript, o autor discute como melhorar o estilo de um aplicativo, focando na transformação de itens da lista em botões interativos. Aqui estão os principais pontos abordados:

  1. Estilo e Aparência:

    • O autor expressa a necessidade de melhorar a aparência dos elementos de texto, que estão difíceis de visualizar.
  2. Adicionando Interatividade:

    • O objetivo é fazer com que os títulos dos itens sejam clicáveis e levem a outra cena. Para isso, os itens devem ser transformados em botões sensíveis ao toque, utilizando o componente TouchableOpacity.
  3. Uso do TouchableOpacity:

    • O TouchableOpacity é escolhido porque não altera o fundo ao ser clicado, ao contrário do TouchableHighlight, que muda a aparência. As propriedades são implementadas dentro do componente.
  4. Estilização:

    • O autor cria estilos usando StyleSheet.create, adicionando margem entre os itens da lista para melhor espaçamento e aparência.
  5. ScrollView:

    • Como a lista pode não caber inteira na tela, o autor decide incorporar um ScrollView para permitir a rolagem, melhorando a usabilidade do aplicativo.
  6. Espaçamento Adicional:

    • Finalmente, é sugerido adicionar um espaçamento maior no topo da lista para melhorar a apresentação geral.

O autor conclui o processo com a premissa de que as atualizações realizadas tornaram a interface mais limpa e funcional.

Video Transcript

Agora vamos lidar com o estilo aqui só para melhorar a aparência, que está muito com o texto aqui, difícil de ver o que está acontecendo. Vou para o last item para mudar as coisas. Senor que a gente queria que quando clicasse ou tocasse em um dos títulos do item, iriam para outra cena. Para fazer isso a gente tem que fazer esses caras serem botões, sensível toque. Para isso eu vou usar o touchable opacity, tá bom? Esse componente aqui para os botões ou sensível toque, eu vou usar o touch opacity para, porque esse cara não aparece um negócio, não muda o background quando eu clico. Se o touchable highlight que eu já usei antes, muda o background, bota um negócio preto ou o acúlculo que você quiser, mas eu vou usar o touchable opacity. Bom, então aqui no item, em vez de texto, vou deixar o texto, mas vou colocar o touchable opacity. No indentation, o on press é a propriedade que acontece quando você toca ou clica, fazer alguma coisa. Bom, não sei ainda o que fazer, vou só dar no, por exemplo, vou prover e vou adicionar um estilo para esse item da lista. Vou botar aqui, vou criar um styles, stylesheet.create, passo um object com os estilos. As como eu estou usando stylesheet, touchable opacity, importe do react nether. Touchable opacity, stylesheet, oh, shit, sheet. A linha ainda não está mais de 80 caracteres, então eu não vou fazer isso, se quiser fazer isso, não vou fazer não. Ah, tá bom, on press. Ah, vou botar um padding, não padding, margin, talvez. Vamos ver margin, aqui é item, item style, pode ser assim, sei lá. Vamos ver, margin, se eu quero botar um espaço entre os itens, botar uns 10 para ver o que acontece. Item style, vou adicionar ao, talvez, touchable opacity. Antes do on press, style vai ser styles.itemstyle. Vamos ver como aparece. Loading, tá aí, melhor agora. Agora a gente sabe que cada um desse é um touchable opacity, desculpa. Vê que você vê que já aparece o negócio, onde eu clico. Sei lá, vamos ver aqui. Você vê que aparece, onde eu clico. Só, legal. Se você quiser adicionar mais estilos, próprios, por favor, faço. Eu acho que já tô, ah, mais uma coisa, não dá para ver todos os itens, só talvez vou adicionar para a lista, um dest. Talvez um scroll view, talvez, vamos botar um scroll view aqui, só para, de verde view ou post scroll view, tá bom? Scroll view, vou, volta aqui, em verde view, vou importar scroll view, para a gente poder scroll scroll view, permite você scroll scroll view, para rodar, rolar aqui. Tá melhor, agora, o negócio que está aparecendo aqui, não tem margem no topo, para a lista. Talvez eu adicione isso. Nem para a lista é para o app, né? Vou adicionar, maior de topo, 15 talvez, 15. Eu adicionei maior de topo, view do app, para poder aparecer. É, sem ser lá, tá aí, tá bom?
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: