Comment utiliser la vidéo comme arrière-plan dans React Native

Dans cet article, nous allons créer un backgroundVideodans React Native. Si vous venez de commencer avec React Native, consultez mon article Ce que vous devez savoir pour commencer à créer des applications mobiles avec React Native.

La vidéo d'arrière-plan peut ajouter un bel effet à l'interface utilisateur d'une application. Ils peuvent également être utiles si vous souhaitez afficher, par exemple, des publicités ou envoyer un message à l'utilisateur, comme nous le ferons ici.

Vous aurez besoin de certaines exigences de base. Pour commencer, vous devez disposer de la configuration de l'environnement react-native. Cela signifie que vous avez:

  • react-native-cli installé
  • SDK Android; si vous avez un mac, vous n'en aurez pas besoin, il suffit de Xcode

Commencer

Tout d'abord, commençons par amorcer une nouvelle application React Native. Dans mon cas, j'utilise react-native-cli. Donc, dans votre terminal, exécutez:

react-native init myapp

Cela devrait installer toutes les dépendances et packages pour exécuter votre application React Native.

L'étape suivante consiste à exécuter et installer l'application sur le simulateur.

Pour iOS:

react-native run-ios

Cela devrait ouvrir le simulateur iOS.

Sur Android:

react-native run-android 

Vous pouvez avoir des problèmes avec Android. Je vous recommande d'utiliser Genymotion et l'émulateur Android ou de consulter ce guide convivial pour configurer l'environnement.

Tout d'abord, nous allons cloner l'écran d'accueil de l'application Peleton. Nous utilisons react-native-videopour le streaming vidéo et styled-componentpour le style. Il faut donc les installer:

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

Ensuite, vous devez lier react-native-video car il contient du code natif - et styled-componentsnous n'en avons pas besoin. Alors lancez simplement:

react-native link

Vous n'avez pas à vous soucier des autres choses, concentrez-vous simplement sur le Videocomposant. Tout d'abord, importez la vidéo de react-native-video et commencez à l'utiliser.

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

Décomposons-le:

  • source : le chemin vers la vidéo source. Vous pouvez utiliser l'URL à la place:
source={{uri:"//youronlineVideo.mp4"}}
  • style: le style de costume que nous voulons donner à la vidéo et la clé pour faire la vidéo de fond
  • resizeMode: dans notre cas, c'est cover; vous pouvez essayer aussi contain or stretchmais cela ne nous donnera pas ce que nous voulons

Et d'autres accessoires sont facultatifs.

Passons à la partie importante: placer la vidéo en arrière-plan. Définissons les styles.

// 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 } });

Qu'avons-nous fait ici?

Nous avons donné à la vidéo un position :absoluteet nous lui donnons la fenêtre heightde l'appareil. Nous avons utilisé le Dimensionsde React Native pour nous assurer que la vidéo occupe toute la hauteur - top:0, left:0,bottom:0,right:0- de sorte que la vidéo occupe tout l'espace!

Le code entier:

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}  ); };

En outre, vous pouvez rendre ce composant réutilisable en procédant comme suit:

  {this.props.children} 

Et vous pouvez l'utiliser avec d'autres composants:

C'est à peu près tout. Merci pour la lecture!

En savoir plus sur React Native:

  • Ce que vous devez savoir pour commencer à créer des applications mobiles dans React Native
  • Styling dans React Native

Autres articles:

  • JavaScript ES6, rédigez moins - Faites plus
  • Comment utiliser le routage dans Vue.js pour créer une meilleure expérience utilisateur
  • Voici les moyens les plus courants de faire une requête HTTP en JavaScript
Vous pouvez me trouver sur Twitter?

Abonnez-vous à ma liste de diffusion pour rester à l'écoute des prochains articles.