Kako koristiti videozapis kao pozadinu u programu React Native

U ovom ćemo postu stvoriti backgroundVideoin React Native. Ako ste tek započeli s React Native, pogledajte moj članak Što trebate znati da biste počeli graditi mobilne aplikacije s React Native.

Video u pozadini može dodati lijep efekt korisničkom sučelju aplikacije. Oni mogu biti korisni i ako želite prikazati, na primjer, oglase ili poslati poruku korisniku, kao što ćemo učiniti ovdje.

Trebat će vam neki osnovni zahtjevi. Da biste započeli, morate imati postavljenu reakcijsku okolinu. To znači da imate:

  • instaliran je reakcijski-izvorni-kli
  • Android SDK; ako imate mac, neće vam trebati, samo Xcode

Početak rada

Prvo najprije pokrenimo novu React Native aplikaciju. U mom slučaju koristim response-native-cli. Dakle, u vašem terminalu:

react-native init myapp

Ovo bi trebalo instalirati sve ovisnosti i pakete za pokretanje vaše React Native aplikacije.

Sljedeći je korak pokrenuti i instalirati aplikaciju na simulatoru.

Za iOS:

react-native run-ios

Ovo bi trebalo otvoriti iOS simulator.

Na Androidu:

react-native run-android 

Možda ćete imati problema s Androidom. Preporučujem da koristite Genymotion i Android emulator ili pogledajte ovaj prijateljski vodič za postavljanje okoliša.

Prvo što ćemo učiniti je kloniranje početnog zaslona aplikacije Peleton. Koristimo react-native-videoza streaming video zapisa i styled-componentza oblikovanje. Dakle, morate ih instalirati:

  • Pređa:
yarn add react-native-video styled-components
  • NPM
npm -i react-native-video styled-components --save

Zatim trebate povezati response-native-video jer sadrži izvorni kôd - a styled-componentsto nam ne treba. Dakle, jednostavno pokrenite:

react-native link

Ne morate brinuti o ostalim stvarima, samo se usredotočite na Videokomponentu. Prvo uvezite Video iz reakcijskog izvornog videozapisa i počnite ga koristiti.

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

Razdvojimo to:

  • izvor : put do izvornog videozapisa. Umjesto toga možete upotrijebiti URL:
source={{uri:"//youronlineVideo.mp4"}}
  • stil: stil kostima koji želimo dati videu i ključ za izradu pozadinskog videozapisa
  • resizeMode: u našem slučaju jest cover; možete i pokušati, contain or stretchali to nam neće pružiti ono što želimo

A ostali rekviziti nisu obvezni.

Prijeđimo na važan dio: postavljanje videozapisa u pozadinski položaj. Definirajmo stilove.

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

Što smo radili ovdje?

Videozapisu position :absolutesmo dali i dajemo mu prozor heightuređaja. Koristili smo DimensionsReact Native kako bismo osigurali da video zauzima cijelu visinu - top:0, left:0,bottom:0,right:0- tako da video zauzima sav prostor!

Cijeli kod:

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

Također, ovu komponentu možete učiniti ponovno upotrebljivom na sljedeći način:

  {this.props.children} 

A možete ga koristiti s drugim komponentama:

To je poprilično to. Hvala na čitanju!

Saznajte više o React Native:

  • Što trebate znati da biste započeli s izradom mobilnih aplikacija u React Nativeu
  • Stiliziranje u React Native

Ostali postovi:

  • JavaScript ES6, napišite Manje - Učinite više
  • Kako koristiti usmjeravanje u Vue.js-u za stvaranje boljeg korisničkog iskustva
  • Evo najpopularnijih načina za izradu HTTP zahtjeva u JavaScript-u
Možete me pronaći na Twitteru?

Pretplatite se na moju mailing listu da biste pratili nadolazeće članke.