Um momento
Aula 05
Cursos / Modulos Nativos do Android no React Native (Native Modules)
ReactMethod show (Toast) – Modulos Nativos do Android no React Native

Summary

# Resumo da Aula sobre Módulos Nativos no React Native

Nesta aula, continuamos a implementação da classe `Modulotors` no contexto de módulos nativos do Android utilizando React Native. 

## O que já foi feito
- Implementamos o construtor e a função `getName`, que retorna o nome da propriedade que aparecerá no objeto `nativeModules`.

## Próximos passos
- Criar uma nova função que poderá ser chamada do JavaScript. 
- Essa função irá realizar a lógica no Java para exibir um toaster (notificação).

## Implementação da Função `show`
1. **Definição da Função**:
   - Chamamos a função de `show`, que deve ser definida como `public void` e não retornar nada (void).
   - Precisamos da anotação `@ReactMethod` para torná-la acessível do JavaScript.

2. **Importação**:
   - Importamos a anotação `ReactMethod` do pacote `com.facebook.react.bridge`.

3. **Uso da Função no App**:
   - No arquivo `app.js`, usamos `nativeModules.meutoast.show` para invocar a função `show`, passando uma mensagem como argumento.
   - A mensagem recebe um string do lado do JavaScript, que será utilizada na exibição do toaster.

## Lógica do Toaster em Java
- Utilizamos `Toast.makeText` que requer três argumentos:
  1. **Contexto**: Obtido com `getReactApplicationContext()`.
  2. **Mensagem**: Passamos a mensagem recebida como parâmetro.
  3. **Duração**: Usamos `Toast.LENGTH_LONG` para definir a duração do toaster.

- Não se esqueça de importar `android.widget.Toast` para usar a classe Toast.

## Revisão
- A função `show` foi criada de forma a receber uma mensagem e chamar a notificação (toast) com os parâmetros corretos.
- O módulo finalizado será acessível via `nativeModules.mytoast.show`.

## Conclusão
Estamos pronto para testar a implementação e continuaremos na próxima aula. 

Até mais!

Video Transcript

Fala pessoal, estamos de volta na sala de módulos nativos do Android no React Native. Vamos continuar a nossa implementação da classe Modulotors. Já fizemos o constutor, fizemos o getName. O getName vai ser retornar o nome da propriedade que irá aparecer lá no nosso objeto de nativeModules, que vem do pacote o React Tractionate. Se você notar aqui no pacote, por exemplo, a source code no seu key, note que o Tosandroids tem propriedades e tem outras propriedades que são funções. Então a gente vai fazer isso agora. Vamos criar uma função que pode ser chamada do JavaScript e que vai fazer a lógica lá no Java. Vamos escrever a lógica no Java e ele vai fazer aquela ponte e esse método de Java vai ser disponível lá do JavaScript. Vamos fazer isso no nosso código, Modulotost. Vamos adicionar um método aqui, por exemplo. A gente agora quer criar aquela função para poder mostrar o toaster. Vamos fazer isso. Vamos chamar a função de show para mostrar o toaster. Essa função aqui, vamos ver que ela vai retornar nada. A gente tem que ser void, é muito importante você entender que para esse método que React tem que ser void, assinatura e public void. E temos que adicionar a anotação chamada React method para poder disponibilizar. Esse método vai ser chamado do lado React, do JavaScript. Então não se esqueça da anotação React method e da assinatura tem que ser void. Não pode retornar. Uma coisa. Então vamos importar o React method, essa anotação vem lá da onde. Então vai ter também vi do bridge. Então eu vou só duplicar essa linha e adicionar o React method do mesmo pacote dos outros. Não se esqueça do import. React method, vem lá do com o Facebook React bridge. Legal. Temos o show aqui. Mas queremos que a gente mostre uma mensagem lá do JavaScript, a gente pode fazer o seguinte, vamos aqui no app.js. Vamos supor que no component.mountain aqui do app, eu quero mostrar uma mensagem. Por exemplo, quero dizer show, sei lá, ou lamun, alguma coisa. Carregando, vamos botar carregando. Então a gente quer fazer algo assim. Mas esse show vai vir da onde? Vai vir lá desse módulo. Então esse módulo vai estar lento do native modules. Então a gente vai chamar assim native modules, ponto. Ponto o nome do módulo que é definido pelo valor de retorno do getname. Se lembra, getname está voltando, retornando a mailtoast. Então vai ter que chamar de mailtoast, ponto show. Então vamos começar com esse exemplo bem básico. A gente quer chamar uma função chamada show do mailtoast módulo, do módulo toast, que tem a mensagem carregando. Para poder mapear daqui do JavaScript, o Java, esse cara aqui, essa string vai aparecer no Java, como o parâmetro do método show. E vai ser uma string. Eu vou chamar de mensagem. Legal, temos acesso àquele argumento. Agora vamos fazer a toast. Para poder fazer essa toast em Java, você fala toast, ponto make text. Se lembra aquela documentação que a gente viu anteriormente? Tem três argumentos. Primeiro vai ser o contexto do aplicativo. Nesse caso, para poder obter o contexto, vamos chamar a função aqui. Essa função, vou chamar get, react, application, context, para a gente obter o contexto do react. Se lembra o react context? Agora vamos dar a mensagem. Poderia ser qualquer coisa, ou la mundo, alguma coisa aqui. Mas eu vou usar o parâmetro aqui que foi dado lá pelo JavaScript. Agora, duração é terceiro argumento. Duração aqui pode ser aquela short ou long. Eu vou usar qualquer, só uma equipe, para deixar simples toast, ponto, acho que é length, long, se não me engano. Deixa eu dar uma olhada no navegador. Length, long, está certo. É um final int. Vamos ver aqui, voltar. Length, long, está certo. Com isso, semicolon, ponto e virgo. Vamos ver se o cara vai dar. Vamos importar também o toast. Vamos dar onde é que vem o toast. Vamos importar lá em cima. Import android.wg.toast. Vou ser olhado a documentação. Android.wgtoast. Certo? Vamos salvar. Ainda não vai funcionar, então vai dar erro. Vamos aqui. Com isso, a gente fez o nosso método que vamos revisar. Nosso método show, que leva um parâmetro a mensagem. Chama o toast para criar uma toast, aquela notificação aqui no fundo, aqui embaixo. Primeiro argumento, são 3 argumentos. Primeiro é o contexto. A gente usa o funcão get react application context para poder obter o contexto. Depois passa a mensagem como segundo argumento. Terceiro argumento é a duração. E eu vou usar a constante toast.length long. Não se esqueça de dar a notação reactmeta para poder aparecer lá no objeto que a gente definiu com o nome meu toast. Vamos usar nativemodules.mytoast.show com a mensagem dessa maneira. Vou deixar aqui comentado porque ainda não vai funcionar. Então, eu te vejo na próxima aula, onde a gente vai continuar. Até mais. Tchau.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: