Resumo da Aula sobre Módulos Nativos do Android no React Native

Estamos de volta a nossa aula de módulos molde nativos do Android no React Native. Vamos continuar, vamos fazer aqui, vamos lá no próximo etapa, no application, no application e adicionar o nosso pacote a metodo, o valor de retorno do método getPackages. Então criamos aqui o pacote toast, implementa a interface react package, fizemos módulos toast.java, pacote toast.java. Módulos toast é onde é que tem o nosso código para definir a função para mostrar o toast, isso é o que é o importante. E a gente quer disponibilizar essa função lá do JavaScript, app.js, lembra depois do component.md mount, nativeModules.multost, que o nome vem do getName, do retorno do retname. E show, passa o string, essa string aparece lá no java, como mensagem, a gente criou a nova toast e finalmente chama toast.show do java. Para poder pegar esse cara você pega, cria um pacote toast que implementa react package e lá na função createNativeModules faz uma lista e adiciona nova instância do nosso módulo. Módulos toast, não se esqueça do react context. Agora nos resta a gente adicionar esse pacote a nosso aplicativo. Então vamos aqui no mainApplication.java, mainApplication.java, no pasta androidappsrc mainjava com módulos nativos barra mainApplication. Vamos aqui, esse cara tem um método, tá? Um método aqui, vamos ver, cadê? Vai aqui no getPackages, tá? GetPackages. Então nesse getPackages a gente vai fazer o que? A gente vai criar um novo pacote toast. Então aqui nesse valor de retorno do getPackages, que é uma lista, tá? Depois do main react package, new main react package, ponha a vírgua e adiciona uma instância do nosso pacote toast. New pacote toast, tá? Não tem nenhum argumento para o construtor. Então adicione essa instância aqui, a lista do valor de retorno do getPackages está aqui no mainApplication, tá? Tá certo? Vamos salvar, vamos aqui no app. De volta no app, lá no component.dnl já temos aqui importamos nativeModules do reactNative, nativeModules.mailToast.show carregando. Vamos ver no que dá. A gente não esqueceu nada, se não deu problema. Deixa eu abrir o navegador com o meu debug. Vou rodar de novo, reiniciar o aplicativo. Cannot read show, van der fijn, já deu problema, ou não? Deu problema, não apareceu aqui. Então vamos recompilar isso? Então eu vou no terminal. Terminal tenho que o JavaScript, mas eu vou para a parte que eu já tinha antes. Eu vou rodar o reactNative aroundRod.no para poder recompilar tudo aqui. Compilar a parte do Java. Vamos ver se funciona. Ou se não, talvez tenha que reiniciar o JavaScript também. Vamos ver. Então está copilando aqui. A parte do Java terminou o sucesso. Agora do metro.li, vamos ver se funcionou. Eu reiniciei, vamos ver se não deu problema. Parece que não tem nada. Eu vou fechar tudo, fechar esse metro. Vou voltar para home. Aqui vou dar o reactNative aroundRod de novo. Eu fechei o JavaScript, abri o JavaScript de novo. Opilou o Java. Vai demorar um pouquinho, está certo. Parte do Java não deu problema, tudo certo. Agora vai lá no metro.bundler. Pronto, bem-vindo ao reactNative. Você viu carregando aqui? Você viu lá carregando? Vê de novo. Carregando. Pode mudar mensagem também, se quiser. Carregando. Vamos mudar mensagem JavaScript. Eu quero ver. Vou mudar o lamo. Vou mudar mensagem no component.dmount. Vou mudar o show. Adê? Salvar. O que está dando hotbrill load? Por isso que não. Tem que reiniciar. O lamo apareceu. Você aprendeu tos como criar. Você pode adicionar mais argumentos, se quiser, duração e outras coisas. Vamos revisar tudo que a gente fez. Aprendemos a criar tos, ou la mundo, acessando do JavaScript. Através do nativeModules, que é importado de react.td. Vamos ver o meu tos, que a gente criou. Vamos ver no nosso debugger. Nosso debugger. Cadê? Vou abrir o debugger. Quero ver o console. Logo. Na nativeModules, você vê que tem o meu tos agora. Dentro do meu tos tem o método show. E a gente criou. Continuando. Nós registramos o meu tos, para esse meu tos tem o getname do módulo tos. Criamos a classe módulo tos, que estende de react.contact.base.java.módule. Tem o construtor, que chama super com o contexto react. Tem o getname para retornar o nome do módulo que vai aparecer no objeto nativeModules. E você pode adicionar várias propriedades e métodos para o módulo tos, que vai aparecer lá do JavaScript. Não se esqueça de decorar o anotação react.mêthd, senão não vai aparecer lá no JavaScript. Fizemos a implementação do método show, que do JavaScript vem como o string mensagem do Java. No Java, a gente faz um tos, leva três argumentos do make text, o contexto, o mensagem e a duração. Depois, finalmente, a gente chama o método show do próprio tos. Depois de fazer isso, a implementação de todo o logic que você quiser, é só criar um pacote, um nova classe, pacote, que implementa react package. Aí você define esse create view manager, no nosso caso, no fernado, só retornou a lista vazia. Depois, você define o create native modules, muito importante, faz uma lista e adiciona uma nova instância do seu módulo, módulo tos com react.txt, e retorna essa lista. Não se esqueça das decorações de override, essas coisas, valores de retorno, etc. Temos cuidado com os imports, que nem todos vêm do bridge, nem todos vêm do react, como o e-manager e assim de por diante. Finalmente, usamos a melhor application no get package, a minha application, essa classe, acho essa função get package, retorno a lista. Nessa lista, tem que adicionar a nova elemento, que é a instância do pacote, do pacote que a gente criou, pacote tos. Muito importante ter isso, e não não vai funcionar. E daí, vai lá do app, só chamar native modules, módulos, módulos, módulos, e qualquer função que você definiu, tá? E é por isso que você aprendeu a criar módulos nativos do Android, no react native. Agora pode chamar lá do JavaScript, aquilo que você escreveu em Java. Pode até adicionar mais parâmetros, mais métodos, propriedades, assim por diante, tá? E por sinal, as propriedades constantes aparecem lá no get constants, tá? Se você notou lá no nosso native modules, tem essa... A de... Toes, tem get constants que você pode usar, redefinir, override esse método, e retornar constantes para ser disponível usar constantes do Java no JavaScript. Tá bom? Então, por esse mini cruzar só, espero que tenham gostado, e até a próxima. Tchau!