Hogyan használjuk a videót háttérként a React Native alkalmazásban

Ebben a bejegyzésben egy backgroundVideoReact Native-ot fogunk létrehozni . Ha még nemrég kezdte a React Native alkalmazást, olvassa el a cikkemet, amelyet tudnia kell, hogy mobilalkalmazásokat kezdjen építeni a React Native alkalmazással.

A háttérvideó szép hatást adhat az alkalmazás felhasználói felületére. Hasznosak lehetnek akkor is, ha például hirdetéseket szeretne megjeleníteni, vagy üzenetet szeretne küldeni a felhasználónak, ahogy ezt itt tesszük.

Szüksége lesz néhány alapvető követelményre. A kezdéshez rendelkeznie kell a reakció-natív környezet beállításával. Ez azt jelenti, hogy:

  • react-native-cli telepítve
  • Android SDK; ha van mac-ja, akkor erre nincs szüksége, csak Xcode-ra

Elkezdeni

Először is indítsunk egy új React Native alkalmazást. Az én esetemben a reakció-native-cli-t használom. Tehát a terminál futtatásakor:

react-native init myapp

Ezzel telepítenie kell az összes függőséget és csomagot a React Native alkalmazás futtatásához.

A következő lépés az alkalmazás futtatása és telepítése a szimulátorra.

IOS esetén:

react-native run-ios

Ennek meg kell nyitnia az iOS szimulátort.

Androidon:

react-native run-android 

Lehet, hogy valami problémája van az Androiddal. Javaslom, hogy használja a Genymotion és az Android emulátort, vagy nézze meg ezt a barátságos útmutatót a környezet beállításához.

Először a Peleton alkalmazás kezdőképernyőjének klónozásával fogunk foglalkozni. Mi használ react-native-videoa video streaming, és styled-componenta stílus. Tehát telepítenie kell őket:

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

Ezután össze kell kapcsolnia a reakció-natív-videót, mert natív kódot tartalmaz - és erre styled-componentsnincs szükségünk. Tehát egyszerűen fuss:

react-native link

Nem kell aggódnia a többi dolog miatt, csak a VideoKomponensre koncentráljon . Először importálja a Video-t a react-native-video-ból, és kezdje el használni.

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

Bontjuk le:

  • forrás : a forrás videó elérési útja. Használhatja helyette az URL-t:
source={{uri:"//youronlineVideo.mp4"}}
  • stílus: az a jelmezstílus, amelyet át szeretnénk adni a videónak, és a kulcs a háttérvideó elkészítéséhez
  • resizeMode: esetünkben ez cover; kipróbálhatod is, contain or stretchde ez nem adja meg nekünk, amit szeretnénk

Egyéb kellékek pedig nem kötelezőek.

Térjünk át a fontos részre: a videó háttérpozícióba helyezésére. Határozzuk meg a stílusokat.

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

Mit csináltunk itt?

Adtunk egy videót a gépnek, position :absoluteés megadtuk heighta készülék ablakát . A DimensionsReact Native felhasználásával biztosítottuk, hogy a videó lefoglalja az egész magasságot top:0, left:0,bottom:0,right:0-, hogy a videó elkapja az összes helyet!

A teljes kód:

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

Ezenkívül a következő módon teheti újrafelhasználhatóvá az összetevőt:

  {this.props.children} 

És más komponensekkel is használható:

Nagyjából ennyi. Köszönöm, hogy elolvasta!

Tudjon meg többet a React Native-ról:

  • Amit tudni kell a mobilalkalmazások építéséhez a React Native alkalmazásban
  • Stílus a React Native-ban

Egyéb bejegyzések:

  • JavaScript ES6, kevesebbet írhat - többet tehet
  • Hogyan lehet a Vue.js-ben az útválasztást használni a jobb felhasználói élmény érdekében
  • Itt találhatók a legnépszerűbb módszerek a HTTP-kérelmek elküldésére a JavaScript-ben
Megtalálsz a Twitteren?

Iratkozzon fel a Levelezőlistámra, hogy folyamatosan értesülhessen a következő cikkekről.