So verwenden Sie Video als Hintergrund in React Native

In diesem Beitrag erstellen wir ein backgroundVideoin React Native. Wenn Sie gerade mit React Native begonnen haben, lesen Sie meinen Artikel Was Sie wissen müssen, um mobile Apps mit React Native zu erstellen.

Hintergrundvideo kann der Benutzeroberfläche einer App einen schönen Effekt verleihen. Sie können auch hilfreich sein, wenn Sie beispielsweise Anzeigen anzeigen oder eine Nachricht an den Benutzer senden möchten, wie hier beschrieben.

Sie benötigen einige grundlegende Anforderungen. Um loszulegen, muss die reaktionsnative Umgebung eingerichtet sein. Das heißt, Sie haben:

  • React-Native-Cli installiert
  • Android SDK; Wenn Sie einen Mac haben, brauchen Sie das nicht, nur Xcode

Beginnen

Lassen Sie uns zuerst eine neue React Native-App booten. In meinem Fall verwende ich react-native-cli. Also in Ihrem Terminal laufen:

react-native init myapp

Dies sollte alle Abhängigkeiten und Pakete installieren, um Ihre React Native-App auszuführen.

Der nächste Schritt ist das Ausführen und Installieren der App auf dem Simulator.

Für iOS:

react-native run-ios

Dies sollte den iOS-Simulator öffnen.

Auf Android:

react-native run-android 

Möglicherweise haben Sie Probleme mit Android. Ich empfehle Ihnen, Genymotion und den Android-Emulator zu verwenden, oder lesen Sie diese freundliche Anleitung, um die Umgebung einzurichten.

Zuerst klonen wir den Startbildschirm der Peleton-App. Wir verwenden react-native-videofür Video-Streaming und styled-componentfür das Styling. Sie müssen sie also installieren:

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

Dann müssen Sie React-Native-Video verknüpfen, da es nativen Code enthält - und styled-componentsdas brauchen wir nicht. Also einfach laufen lassen:

react-native link

Sie müssen sich nicht um die anderen Dinge kümmern, sondern sich nur auf die VideoKomponente konzentrieren. Importieren Sie zunächst ein Video aus einem reaktionsnativen Video und verwenden Sie es.

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

Lassen Sie es uns zusammenfassen:

  • Quelle : Der Pfad zum Quellvideo. Sie können stattdessen die URL verwenden:
source={{uri:"//youronlineVideo.mp4"}}
  • Stil: Der Kostümstil, den wir dem Video geben möchten, und der Schlüssel zum Erstellen des Hintergrundvideos
  • resizeMode: in unserem Fall ist es cover; Sie können es auch versuchen, contain or stretchaber das gibt uns nicht das, was wir wollen

Und andere Requisiten sind optional.

Kommen wir zum wichtigen Teil: Platzieren Sie das Video in der Hintergrundposition. Definieren wir die Stile.

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

Was haben wir hier gemacht?

Wir haben dem Video ein position :absoluteund wir geben ihm das Fenster heightdes Geräts. Wir haben das Dimensionsvon React Native verwendet, um sicherzustellen, dass das Video die gesamte Höhe einnimmt - top:0, left:0,bottom:0,right:0- damit das Video den gesamten Platz einnimmt !

Der gesamte Code:

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

Sie können diese Komponente auch wie folgt wiederverwendbar machen:

  {this.props.children} 

Und Sie können es mit anderen Komponenten verwenden:

Das wars so ziemlich. Danke fürs Lesen!

Erfahren Sie mehr über React Native:

  • Was Sie wissen müssen, um mobile Apps in React Native zu erstellen
  • Styling in React Native

Andere Beiträge:

  • JavaScript ES6, weniger schreiben - Mehr tun
  • Verwendung des Routings in Vue.js, um eine bessere Benutzererfahrung zu erzielen
  • Hier sind die beliebtesten Möglichkeiten, eine HTTP-Anfrage in JavaScript zu stellen
Sie können mich auf Twitter finden?

Abonnieren Sie meine Mailingliste, um über kommende Artikel auf dem Laufenden zu bleiben.