Aula 04
NativeModules e getName – Modulos Nativos do Android no React Native
Summary
Resumo da Aula sobre Módulos Nativos no React Native
Na aula de hoje, continuamos a implementação de um módulo nativo em Java para o React Native, especificamente dentro do arquivo ModuleToast.java
, localizado na pasta android.app.src.man.java.com.modules.nativos
.
Principais Tópicos Abordados
-
Definição da Classe: Criamos uma classe que extende
ReactContextBaseJavaModule
, tornando-a um módulo nativo. -
Construtor:
- Criamos um construtor que recebe um parâmetro do tipo
ReactApplicationContext
. - Importamos
ReactApplicationContext
do pacote doReactContextBaseJavaModule
e, em seguida, chamamos o construtor da classe pai.
- Criamos um construtor que recebe um parâmetro do tipo
-
Uso no app.js:
- No arquivo
app.js
, importamosNativeModules
doReact Native
. - Para visualizar os módulos nativos disponíveis, foi adicionado um
console.log
no métodocomponentDidMount
.
- No arquivo
-
Método GetName:
- Definimos o método
getName
, que retorna o nome do módulo nativo (por exemplo, "MeuToast"). - É importante adicionar a anotação
@Override
para redefinir o método da classe base.
- Definimos o método
Próximos Passos
- Aguarde a próxima aula para entender como registrar o módulo e finalizá-lo.
Agradeço a participação de todos e nos vemos na próxima aula!
Video Transcript
Fala pessoal, estamos de volta com a nossa aula sobre módulos nativos do Android no React Native.
Vamos continuar a nossa implementação da classe de Java do módulo nativo.
Estamos aqui no arquivo módulo tos.java.
Está dentro da pasta android.app.src.man.java.com.módulos.nativos.
Módulos nativos são o nome do projeto.
Estamos aqui.
Criamos nossa classe que estende de React Context Base Java Modulo.
Isso vai definir essa classe como um módulo nativo.
Agora estamos aqui no construtor, ainda não tem nada.
Então, o que a gente vai fazer no construtor?
Para o construtor, ele vai...
Esse construtor aqui, vamos criar um construtor que leva um parâmetro que vai ser o contexto do aplicativo React.
Então, a gente vai chamar o seguinte.
A gente vai ter essa variável React Context, o contexto do aplicativo do React,
que a gente vai ser do tipo que React Application Context.
Então, para poder usar esse cara, vamos importar aqui em cima.
Importa esse cara.
Mas da onde vem esse cara?
Ele vai vir lá do mesmo...
Pacote do React Context Base Java Modulo.
Então, vou copiar e colar esse cara, do bridge.
Tá bom?
E com isso, a gente vai só chamar aqui o construtor do Py, da Classify,
com o super e passar esse contexto do React.
Só isso.
Super com o contexto do React.
Tá bom?
Agora.
O seguinte, quando você estiver aqui no seu app.js, estou aqui no arquivo app.js, dentro da parte do nosso projeto,
nós temos o import do React Native.
Para a gente poder usar o nosso modelo que a gente vai ver já,
a gente vai ter que importar o native modules do React Native.
Agora, se eu pô aqui, native modules.
Esse aqui, está dentro do...
Quando você importe o React Native, vai ter esse pacote aqui,
esse modelo que você vai usar ponto native modules.
Por isso que eu estou lutando aqui com chave, tá?
E dentro desse native modules, se você não ver aqui, deixa eu dar um console log.
Eu estou aqui no app, tá?
No class app, eu vou adicionar component, dead mount,
quando ele montar, eu vou dar um console log aqui do native modules, para você ver, tá?
Vou dar o console log aqui, para você ver o que aparece.
Deixa eu salvar.
Agora, eu vou devolver o meu embalador, comando M,
eu vou habilitar o debug de JavaScript remoto,
e vou abrir o console aqui, para ver se ele deu algum console log.
Então, deu o console log aqui do native modules,
você note que tem vários modules nativos já, várias coisas aqui,
e a gente vai adicionar um novo module, esse objeto aqui,
então ele vai aparecer aqui.
Acho que já tem um torce Android, não sei o que, tem umas funções aqui.
Tá?
Mas a gente está fazendo a mesma coisa, só para ver como é.
Tá certo?
Então, voltando aqui, a gente viu que vai aparecer lá no native modules,
quando a gente terminar tudo.
Voltando aqui no module Toast.
Então, qual é o nome que vai aparecer aqui nesse native modules?
Essa é a pergunta, né?
Qual será que é o nome?
Então, a gente pode definir o nome da propriedade que irá aparecer nesse objeto native modules,
usando um método aqui, dentro do nosso module Toast,
esse método é chamado de GetName.
Esse método aqui não leva nenhum parâmetro,
mas ele vai retornar uma stream, que vai ser público,
e a gente vai retornar o nome do module nativo.
Pode ser qualquer coisa que você quiser.
Então, eu vou dizer, por exemplo, poderia ser a mesma coisa o module Toast,
ou até diferente, eu pode dizer,
vamos falar meu Toast, tá?
Só para poder diferenciar, para você ver que não precisa ser o mesmo nome da classe aqui.
Então, ele vai aparecer lá no native modules, naquelaquele objeto,
com esse nome aqui chamado meu Toast, tá?
Mas note que isso ainda não vai aparecer agora, porque a gente não fez o registro, tá?
Então, tem que esperar até o final, para você finalmente ver o que vai aparecer.
Tem que também que adicionar essa anotação aqui de override,
essa anotação para você poder redefinir o GetName com um novo nome aqui, tá?
Override da classe base lá, tá?
Não se esqueça da anotação.
Com isso, a gente vai salvar esse cara,
e vamos dar uma pausa aqui e te vejo na próxima aula, tá?
Até lá.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: