fala Mestres beleza no vídeo de hoje nós vamos ver aqui como usar o webview no nosso aplicativo tanto faz ele ser Expo gerenciado pelo Expo ou react Native puro vai funcionar Em ambos vai entender o que que é webview e como fazer o uso aqui na nossa aplicação e antes da gente ir pro vídeo Eu gostaria de pedir que você deix um like aí se inscreva no canal e também acanha a gente nas redes sociais os links estarão todos aí na descrição meu nome é jcer eu sou desenvolvedor aqui na Mestres e bora lá para
mais um conteúdo [Música] bom então aqui no nosso projeto projeto já tá rodando eu a tela inicial né deixei ela vazia aqui só com uma View e eu também já fiz a instalação do pacote que é o react Native web View tá aqui pra gente que tá usando o Expo a gente vai sempre usar né o Expo Install e o pacote n para ele fazer a instalação no meu caso aqui ele instalou o react Native webview na versão algum Website aí e renderizar esse website dentro do meu aplicativo então o caso casos que a gente
pode estar fazendo isso pode variar Bastante né pode variar Bastante é um grande depende aí mas isso pode ser útil né Eu já vi isso ser útil aí em em vários casos muito específicos coisas até bem delicadas mas que é é útil pra gente a gente consegue por exemplo eu vou trazer aqui um exemplo que pode ser um pouco complexo pode ser um pouco confuso mas foi uma solução que teve que eu vi que a gente tinha um scp a gente precisava de rodar um script de pagamento a gente estava trabalhando com processamento de pagamentos
e esse script de pagamento ele só era disponibilizado pra web e a gente precisava processar pagamento no app tá então uma das soluç a gente acabou gerando essa solução usando aí a webview para fazer um certo processamento aí pra gente eu não vou ficar entrando aqui em detalhes porque não é o tópico do vídeo mas é um caso que eu que nós usamos né a webview para pegar um conteúdo da web e fazer um processamento no nosso web mas a ideia principal é que a webview seja usada para disponibilizar pra gente Visualizar por isso é
uma viw né visualizar elementos da web então se eu quiser por exemplo colocar dentro do meu App o site da Google eu consigo se eu quiser trazer o site da Mestres da web e ex ele dentro do meu app também eu consigo ou se a minha empresa ela tem uma aplicação web que tem alguma funcionalidade que eu quero trazer pro we temporariamente ou Definitivamente eu consigo também trazer o meu a versão do meu site da Web e exibir ela dentro do meu App e nós vamos ver isso aqui tá Então vamos lá eu tenho aqui
uma View dentro dessa View o que que nós temos aqui depois que a gente instala o pacote nós temos aqui o Web viw essa componente tá e e essa componente webview ela é extremamente simples a gente passa para ela a gente simplesmente vai definir um estilo para ela para que ela ocupe a tela toda então aqui o Style Vai ser Style eu vou passar esse contêiner que eu tenho aqui né que é o Flex 1 ele vai se estender e a outra propriedade é o sorce Né que é a fonte Então essa fonte é vai
ser o qu vai ser um HTML e esse HTML é o texto HTML em si então eu posso passar aqui uma string eu posso colocar aqui uma Dent dentro da div vou colocar um parágrafo Olá Mestres E se eu salvo isso aqui ele vai recarregar vamos ver se ele já vai exibir pra gente ele não tá exibindo essa minha View aqui de fora ela também tem que tá ocupando Todo o espaço né isso Ó lá apareceu é tá bem pequeno porque é um parágrafo a gente não aplicou nenhum CSS aqui eu também não não vou
aplicar isso agora mas nós temos aqui ó um Olá Mestres né que é esse parágrafo Se eu colocar aqui um outro parágrafo e testando webview e salvo Olha lá testando webview então ele interpreta o HTML que eu estou passando e renderiza para mim tá então ao invés do HTML eu a outra opção que eu posso ter um URI esse URI vai ser aí o endereço por exemplo htps do bar gooogle.com e se eu salvo olha aí ó nós temos aí o site o Google né eu tô eu tô com zoom aqui deixa eu tirar a
ferramenta e aqui eu poderia buscar Mestres da web E aí ó Mestres da web temos aqui o site daqui da Mestres né e ele vai carregar tudo para mim eu vou conseguir Navegar aqui é como se fosse um navegador dentro do aplicativo tá então eu posso renderizar aqui também o site da Mestres né que é o Mestres da web.com.br e aqui vai carregar direto o s é que já tava o site da Mestres aberto né mas carregou ele aqui deixa eu tirar o ri aqui e salvar para ele ficar em branco e vou voltar com
o ri da Mestres salvo de novo e tá aí o site funcional a gente consegue clicar nos botões né tudo funciona é é um browser dentro do nosso app tá então a gente consegue fazer isso e aqui no estilo eu consigo controlar também né então se eu quiser por exemplo que essa webview que ela ocupe somente 50% da da tela né de altura por exemplo deixa eu passar aqui o 50% ela só vai ocupar metade ou deveria né não é Style he 50% vamos recarregar Nossa linda Splash screen aí ó é o estilo o estilo
não tá Aim de de graça aqui comigo não deix eu tirar esse Flex um aqui de fora vai sumir tudo altura 200 é aqui é o CSS brincando com a gente né Por que que isso não tá funcionando enfim né não vamos ficar perdendo tempo com isso aqui não vamos a gente já entendeu o que que é o webview a largura funciona é a altura que tá de brincadeira comigo né mas dá para fazer tá é eu que sou muito sortudo para mexer com isso mas enfim mais um teste essa View aqui de fora eu
vou colocar a altura de 200 Aí sim Aí sim a webview ela tá já tá se expandindo né ocupando tudo mas a view de fora eu Controlo a altura dela E aí a gente consegue enfim eu consigo personalizar aplicar estilo controlar o que eu quiser aqui e dentro dessa webview ela é uma View né então a gente consegue estar trabalhando aí com os estilos com ela também Beleza então para essa aula aqui é isso eu espero que eu tenha ajudado qualquer dúvida pode estar deixando um comentário aí logo abaixo e é isso aí muito obrigado
e até a próxima [Música]
