React Native é provavelmente a estrutura de aplicativo híbrido mais amplamente usada hoje porque permite que os desenvolvedores criem aplicativos nativos escrevendo o código React , que fornece uma experiência de desenvolvedor semelhante entre sites e aplicativos. Criar aplicativos nunca foi tão fácil.
Mas isso significa que você pode transformar seu site em um aplicativo diretamente, copiando todo o seu código React para o aplicativo React Native? Não, infelizmente, não é tão simples. Embora o código de um aplicativo React Native seja semelhante ao código de um aplicativo da web escrito em React, existem algumas diferenças pequenas, mas críticas.
Comparado a sites e navegadores, os aplicativos móveis têm muitas interfaces nativas e funcionalidades. Embora os aplicativos React Native sejam compilados em aplicativos nativos para iOS ou Android, algumas implementações de elementos simples diferem do que vemos na versão web do React. Por exemplo,
torna-se
Isso torna o React Native diferente de todos os frameworks de aplicativos híbridos baseados em Cordova . Mas o que parece ser uma grande desvantagem, na verdade, torna possível que o aplicativo compile em código nativo em vez de em uma visualização da web simulada.
Um elemento diferente dos elementos nativos da web é o vídeo. No mundo do HTML e da web, visualizar um vídeo é tão simples quanto usar o Elemento HTML
No contexto de aplicativos, implementar vídeo não é tão fácil quanto na web. A boa notícia é que a comunidade React Native já desenvolveu soluções muito populares para esse problema.
Este artigo destaca o pacote mais comum, react-native-video, para usar vídeo em seu aplicativo React Native. Você também aprenderá como implementá-lo em seu aplicativo React Native.
Pré-requisitos
Como a instalação e o uso podem diferir dependendo do dispositivo para o qual você está desenvolvendo, nos concentraremos no Versão iOS e desenvolvimento do aplicativo em um ambiente de desenvolvedor baseado em Mac para todos os exemplos.
O desenvolvimento para vários tipos de dispositivos ou plataformas (por exemplo, Android) é semelhante, mas você precisa estar ciente das diferenças de são descritos em grande detalhe na documentação do pacote.
O que é react-native-video?
No momento em que este livro foi escrito, não havia nenhuma alternativa real para o pacote mais amplamente usado, react-native-video .
Enquanto eu sou fã de comparar pacotes diferentes, isso não faz sentido aqui, então vamos apenas destacar o uso, prós e contras desta biblioteca e, em seguida, aprender como usá-la. O pacote react-native-video tem 500kB de tamanho e pode ser usado em todos os dispositivos no mundo React Native.
Instalando o pacote
Antes de usar a biblioteca, você deve instale o pacote no diretório raiz do seu projeto:
npm install–save react-native-video
Se você estiver executando seu aplicativo React nativo em um Mac, também deve executar o seguinte comando:
npx pod-install
Para os outros ambientes e ambientes de aplicativo, consulte o guia de instalação oficial de sua plataforma.
Usando react-native-video
Antes de explicar como usar o pacote, vamos começar com um exemplo do que queremos alcançar com ele. Um caso de uso comum para vídeos em aplicativos são planos de fundo dinâmicos, que é o que queremos alcançar para nosso aplicativo na tela de login.
Deve ser algo assim:
Primeiro, importamos o componente de vídeo da biblioteca para o componente onde queremos que o vídeo seja exibido.
Claro, para que o componente de vídeo exiba qualquer coisa, precisamos de um arquivo de vídeo. Pode ser um arquivo em seu projeto ou um link para um recurso externo.
Agora, vamos colocar tudo junto:
import Video from’react-native-video’; importar vídeo de’../test-video.mp4′; const MyComponent=()=> {return (
Como você pode ver, passamos o arquivo de vídeo importado de nosso projeto diretamente para o componente. Se preferir um link para um arquivo de vídeo externo, você também pode usar a propriedade da fonte, da seguinte forma:
Para obter a aparência do vídeo de fundo, também passamos alguns estilos do React Native para o componente. Além disso, definimos a pausa da sustentação como falsa, o que diz ao componente para iniciar o vídeo logo em seguida. Também definimos a repetição de prop para true, fazendo o loop de vídeo.
Props de componentes adicionais para usar em react-native-video
Alcançamos nosso caso de uso muito rapidamente usando apenas quatro adereços do componente. No entanto, existem muitas outras maneiras de usar adereços. Você pode verificar a documentação para ver a lista completa, mas deixe-me mostrar uma seleção de opções que considero muito úteis.
allowExternalPlayback
Este prop permite que o vídeo seja controlado por recursos externos, como AirPlay ou HDMI, mas só está disponível no iOS.
playInBackground
Use esta opção para especificar se o vídeo deve continuar a ser reproduzido quando o aplicativo for fechado. Claro, apenas o áudio continuará a ser reproduzido, mas para alguns casos de uso, pode ser útil manter a reprodução do vídeo mesmo quando o aplicativo foi fechado.
pôster
Este objeto cria uma imagem que é mostrada quando o vídeo está carregando ou ainda não começou, como uma miniatura normalmente vista no YouTube. Além disso, você pode ajustar a imagem com posterResizeMode .
controles
Em Em nosso exemplo acima, não queríamos mostrar os controles do vídeo porque ele estava sendo executado em segundo plano, que é o comportamento padrão do componente. Se você deseja permitir que o usuário controle o vídeo, pode simplesmente definir os controles como verdadeiros e os controles serão exibidos automaticamente.
Nota: No iOS, os controles são exibidos em tela inteira modo mesmo se este sinalizador estiver definido como falso.
Criando controles de vídeo externos
O componente também fornece tudo que você precisa para controlar o vídeo de fora, então é possível criar sua própria interface de usuário exclusiva para controlá-lo.
As propriedades como pausado , mudo , volume , onprogress ou rate são adereços que você pode personalizar usando o estado React, e você pode deixar qualquer outro elemento controlá-los. Aqui está um breve exemplo do que quero dizer com isso:
function Home (props) {const [isPlaying, setIsPlaying]=React.useState (false); const [isMuted, setIsMuted]=React.useState (false); const togglePlaying=()=> {}; return (
Como você pode ver, com um estado simples e usando botões, podemos controlar o vídeo da maneira que quisermos, o que nos dá a capacidade de ter uma IU do vídeo totalmente personalizada.
Invocar métodos no elemento de vídeo
Você também pode invocar alguns métodos no elemento de vídeo para ter mais controle sobre ele, como usar ações como salvar para salvar o vídeo nas fotos do dispositivo ou controlar o modo de tela do vídeo.
Para conseguir isso, você precisa criar uma referência para o videoPlayer e armazená-la, por exemplo, em um useRef:
import Video from’react-native-video’; importar vídeo de’../test-video.mp4′; const MyComponent=()=> {const videoPlayer=React.useRef (); const goFullScreen=()=> {if (videoPlayer.current) {videoPlayer.current.presentFullscreenPlayer (); }}; return (
Conclusão
React Native é uma ferramenta poderosa porque oferece a possibilidade de escrever seu aplicativo usando React, que é muito semelhante ao aquele usado na web.
A única diferença é que não escrevemos elementos HTML. No entanto, incluímos elementos nativos. Alguns desses elementos já estão incluídos na estrutura, mas elementos como vídeos também devem ser instalados.
Embora os vídeos se comportem de maneira semelhante à da web, os desenvolvedores precisam considerar a construção de recursos como o modo de tela inteira ou a opção de retomar a reprodução quando o aplicativo é minimizado.
A biblioteca de vídeo react-native oferece todas essas opções para que você possa adicionar facilmente vídeos ao seu aplicativo e personalizá-lo, garantindo que seus usuários tenham uma ótima experiência ao assistir vídeos em seu aplicativo!
