Cómo usar el video como fondo en React Native

En esta publicación, vamos a crear un backgroundVideoarchivo en React Native. Si acaba de comenzar con React Native, consulte mi artículo Lo que necesita saber para comenzar a crear aplicaciones móviles con React Native.

El video de fondo puede agregar un efecto agradable a la interfaz de usuario de una aplicación. También pueden ser útiles si desea mostrar, por ejemplo, anuncios o enviar un mensaje al usuario, como lo haremos aquí.

Necesitará algunos requisitos básicos. Para comenzar, debe tener la configuración del entorno nativo de reacción. Eso significa que tienes:

  • react-native-cli instalado
  • SDK de Android; si tienes una mac no la necesitarás, solo Xcode

Empezando

Lo primero es lo primero, vamos a iniciar una nueva aplicación React Native. En mi caso, estoy usando react-native-cli. Entonces en su terminal ejecute:

react-native init myapp

Esto debería instalar todas las dependencias y paquetes para ejecutar su aplicación React Native.

El siguiente paso es ejecutar e instalar la aplicación en el simulador.

Para iOS:

react-native run-ios

Esto debería abrir el simulador de iOS.

En Android:

react-native run-android 

Puede que tengas algunos problemas con Android. Le recomiendo que use Genymotion y el emulador de Android o consulte esta guía amigable para configurar el entorno.

Primero, lo que vamos a hacer es clonar la pantalla de inicio de la aplicación Peleton. Lo estamos usando react-native-videopara transmisión de video y styled-componentpara estilizar. Entonces tienes que instalarlos:

  • Hilo:
yarn add react-native-video styled-components
  • NPM
npm -i react-native-video styled-components --save

Luego, debe vincular react-native-video porque contiene código nativo, y styled-componentsno lo necesitamos. Así que simplemente ejecuta:

react-native link

No tiene que preocuparse por las otras cosas, solo concéntrese en el VideoComponente. Primero, importe el video de react-native-video y comience a usarlo.

import import Video from "react-native-video"; 

Vamos a analizarlo:

  • fuente : la ruta al video fuente. Puede utilizar la URL en su lugar:
source={{uri:"//youronlineVideo.mp4"}}
  • estilo: el estilo de vestuario que queremos darle al video y la clave para hacer el video de fondo
  • resizeMode: en nuestro caso lo es cover; también puedes intentarlo contain or stretchpero esto no nos dará lo que queremos

Y otros accesorios son opcionales.

Pasemos a la parte importante: colocar el video en la posición de fondo. Definamos los estilos.

// We use StyleSheet from react-native so don't forget to import it //import {StyleSheet} from "react-native"; const { height } = Dimensions.get("window"); const styles = StyleSheet.create({ backgroundVideo: { height: height, position: "absolute", top: 0, left: 0, alignItems: "stretch", bottom: 0, right: 0 } });

Que hicimos aqui

Le dimos al video un position :absolutey le damos la ventana heightdel dispositivo. Usamos Dimensionsde React Native para asegurarnos de top:0, left:0,bottom:0,right:0que el video ocupe todo el espacio, ¡de modo que el video ocupe todo el espacio!

El código completo:

import React, { Component, Fragment } from "react"; import { Text, View, StyleSheet, Dimensions, TouchableHighlight } from "react-native"; import styled from "styled-components/native"; import Video from "react-native-video"; const { width, height } = Dimensions.get("window"); export default class BackgroundVideo extends Component { render() { return (     Join Live And on-demand classes  With world-class instructions right here, right now          ); } } const styles = StyleSheet.create({ backgroundVideo: { height: height, position: "absolute", top: 0, left: 0, alignItems: "stretch", bottom: 0, right: 0 } }); // styled-component export const Wrapper = styled.View` justify-content: space-between; padding: 20px; align-items: center; flex-direction: column; `; export const Logo = styled.Image` max-width: 100px; width: 100px; height: 100px; `; export const TextDescription = styled.Text` letter-spacing: 3; color: #f4f4f4; text-align: center; text-transform: uppercase; `; export const ButtonWrapper = styled.View` justify-content: center; flex-direction: column; align-items: center; margin-top: 100px; `; export const Title = styled.Text` color: #f4f4f4; margin: 50% 0px 20px; font-size: 30; text-align: center; font-weight: bold; text-transform: uppercase; letter-spacing: 3; `; const StyledButton = styled.TouchableHighlight` width:250px; background-color:${props => (props.transparent ? "transparent" : "#f3f8ff")}; padding:15px; border:${props => (props.transparent ? "1px solid #f3f8ff " : 0)} justify-content:center; margin-bottom:20px; border-radius:24px `; StyledTitle = styled.Text` text-transform: uppercase; text-align: center; font-weight: bold; letter-spacing: 3; color: ${props => (props.transparent ? "#f3f8ff " : "#666")}; `; export const Button = ({ onPress, color, ...props }) => { return (  {props.title}  ); };

Además, puede hacer que este componente sea reutilizable haciendo lo siguiente:

  {this.props.children} 

Y puedes usarlo con otros componentes:

Eso es practicamente todo. ¡Gracias por leer!

Obtenga más información sobre React Native:

  • Lo que necesita saber para comenzar a crear aplicaciones móviles en React Native
  • Estilo en React Native

Otras publicaciones:

  • JavaScript ES6, escribe menos, haz más
  • Cómo usar el enrutamiento en Vue.js para crear una mejor experiencia de usuario
  • Estas son las formas más populares de realizar una solicitud HTTP en JavaScript
¿Me puedes encontrar en Twitter?

Suscríbase a mi lista de correo para estar atento a los próximos artículos.