Um momento
Aula 03
Cursos / Modulos Nativos do Android no React Native (Native Modules)
Classe de Java do Modulo Nativo – Modulos Nativos do Android no React Native

Summary

Resumo da Aula sobre o Widget Toast do Android

Nesta aula, aprendemos sobre o widget Toast do Android, que permite exibir mensagens breves na tela, como "Sending message".

Principais Conceitos

  • Toast: É uma notificação simples que aparece por um curto período de tempo.
  • Make Text: O método usado para criar uma Toast, que requer os seguintes parâmetros:
    • Contexto: O contexto do aplicativo.
    • Texto: A mensagem que você deseja exibir.
    • Duração: Pode ser Toast.LENGTH_SHORT ou Toast.LENGTH_LONG.

Importação e Uso no Java

Para utilizar o Toast em Java:

  1. Importar o pacote: android.widget.Toast.
  2. Usar o método makeText() para construir a mensagem.
  3. Chamar o método show() para exibir a Toast.

Implementação no React Native

  1. Criar Classe Java:

    • Navegar até a pasta do projeto android/app/src/main/java/com/[seu_projeto].
    • Criar um arquivo ModuloToast.java.
  2. Definição da Classe:

    • Definir como public class ModuloToast.
    • Criar um construtor para a classe.
    • A classe deve estender ReactContextBaseJavaModule do pacote com.facebook.react.bridge.
  3. Estrutura do Módulo:

    • O pacote da classe deve ser definido como package com.[nome_dos_módulos_nativos].

Próximos Passos

Na próxima aula, vamos continuar a implementação da classe e adicionar a lógica necessária para o funcionamento da Toast no módulo nativo.


Essa aula proporciona uma base para compreensão do uso de widgets e integração entre Java e React Native.

Video Transcript

Nesta aula vamos aprender mais sobre o widget toast do Android para a gente poder ver o que a gente vai fazer no nosso módulo nativo. Eu vou aqui no navegador, vamos botar aquela página de documentação do Android. Estou aqui developer.android.com, no Guia, né? Você pode ver aqui se quiser subir ao link. Estou aqui no visão geral de notificações toast. Esse toast nada mais, nada menos, que essa mensagem aqui, olha aqui, mensagem que aparece, sending message, aqui você pode botar qualquer mensagem que você quiser. Então vamos aprender a pegar esse cara e disponibilizar do Java para o JavaScript lá no React Native. Então vamos lá. Vamos só aprender como é que o básico desse widget. Então você precisa saber um pouco de Java para poder entender o que está acontecendo. Então vamos aqui no Java. Então para poder fazer uma toast, o que é que faz? É só pegar o importar, obviamente, depois de importar esse cara e esse toast. Você pega aqui toast e fala ponto make text, esse método, que leva aqui o contexto e a duração, o contexto do aplicativo, o texto é qualquer string que a gente quiser. E a duração pode ser o toast.link.short, que é constante, tá? Temos as constantes, temos também a toast.link.underscore.long, que é mais longo, a duração mais longa, tá? Aí você pode dar uma olhada aqui, vamos lá, vamos ver aqui se tem... Então depois que a gente criar essa toast, nós podemos achar o método show nessa toast para poder mostrar a mensagem. Então o objeto toast tem aqui a documentação, que eu vou ver aqui. Então esse toast é parte do pacote android.widit.toast, tá? E a gente vai usar para poder importar. Então aqui tem o sumar, resume de tudo, as constantes podem ser length long, length short, eu construo toast, mas a gente vai usar o que é o método make toast, make text, esse método aqui, tá? Leva três parâmetros, contexto, aplicativo, uma sequência de caracteres e a duração, tá? E você pode ver mais referência aqui se quiser, se estiver curioso, eu brincaram desses métodos, tá? Então vamos lá, vamos lá para o código do react-native aqui. Então primeiro de tudo a gente vai ter que criar uma classe de Java, tá? Para poder armazenar a lógica, código do nosso modo. Então vamos aqui na pasta android, dentro do projeto, barra app, barra src, barra main, barra java, barra com, barra o nome do seu projeto, nesse caso módulos nativos, tá? E finalmente a gente tem dois arquivos agora, você dá uma olhada meio em octavio de ponto java e meio em apacate de ponto java. Note que o pacote é com ponto o nome do projeto, tá? Esse é o pacote. Então eu vou criar aqui dentro dessa pasta módulos nativos, um novo, no novo clássico, um arquivo para armazenar a classe, tá? Eu vou chamar esse cara aqui, chamar aqui módulo-tools, tá? Módulo-tools.java. Agora vamos criar uma classe primeiro, vamos criar uma classe public class, tá? O nome da classe módulo-tools, o mesmo nome do ar-heel, tá? Vamos usar essa classe aqui, vamos criar o nosso construtor, então o construtor vai ser public-módulo-tools, eu só queria assim, sei nada mesmo, tá? Agora, o que a gente vai fazer aqui? Então a gente tem essa classe módulo-tools, mas não tem nada ainda. Então primeiro a gente tem que derivar essa classe de outra classe. Essa outra classe vai ser react-context-based-java-módulo, nome bem longo, para poder definir esse cara como um módulo nativo. Então a gente vai usar o extends para poder derivar de outra classe, né? Chamada react-context-based-java-módulo, tá? Então é bem longo o nome. Então como a gente usou esse cara, a gente vai ter que portar aqui em cima, e eu vou dar um import aqui desse cara, mas da onde é que vem? Então esse cara vai vir lá do pacote do Facebook, tá? Então a gente vai dizer o que? com.facebook.vac.bridge, tá? ponto, o nome desse módulo. Então esse pacote vem desse cara aqui. Agora esqueci de definir o pacote desse arquivo, vai ser o package com ponto nome dos módulos nativos. Tá? O mesmo nome aqui dos outros, para a gente poder acessar ele no próprio módulo pacote, né? Tá? Então... Vamos reagir ao que a gente fez aqui. Nós fizemos um arquivo chamado módulo-toast.java. Toast é qualquer... Pode ser qualquer nome que você quiser, mas eu chamei de módulo-toast, que vai ser o módulo que vai ter as funcionalidades do toast. Então criamos uma classe, construtor ainda não tem nada. Tá? Agora essa classe tem que ser derivada de outra classe. Então vamos estender da classe react context-base-java-módulo. Essa aqui vai ser a classe base, tá? Que vem do pacote com Facebook-vac-bridge. Tá bom? Então vamos dar uma pausa aqui e te vejo na próxima aula.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: