Как да използвам видео като фон в React Native

В този пост ще създадем backgroundVideoin React Native. Ако току-що сте започнали с React Native, вижте статията ми Какво трябва да знаете, за да започнете да създавате мобилни приложения с React Native.

Фоновото видео може да добави приятен ефект към потребителския интерфейс на приложение. Те могат да бъдат полезни и ако искате да показвате например реклами или да изпратите съобщение до потребителя, както ще направим тук.

Ще ви трябват някои основни изисквания. За да започнете, трябва да имате настройка на средата за реагиране. Това означава, че имате:

  • reak-native-cli инсталиран
  • Android SDK; ако имате Mac, няма да имате нужда от това, просто Xcode

Приготвяме се да започнем

Първо, нека първо да стартираме ново приложение React Native. В моя случай използвам response-native-cli. Така че във вашия терминал:

react-native init myapp

Това трябва да инсталира всички зависимости и пакети, за да стартирате вашето приложение React Native.

Следващата стъпка е да стартирате и инсталирате приложението на симулатора.

За iOS:

react-native run-ios

Това трябва да отвори iOS симулатора.

На Android:

react-native run-android 

Може да имате проблеми с Android. Препоръчвам ви да използвате Genymotion и емулатора на Android или да разгледате това приятелско ръководство, за да настроите средата.

Първо това, което ще направим, е да клонираме началния екран на приложението Peleton. Използваме react-native-videoза видео стрийминг и styled-componentза стилизиране. Затова трябва да ги инсталирате:

  • Прежди:
yarn add react-native-video styled-components
  • NPM
npm -i react-native-video styled-components --save

След това трябва да свържете response-native-video, защото той съдържа роден код - а styled-componentsние не се нуждаем от това. Така че просто изпълнете:

react-native link

Не е нужно да се притеснявате за другите неща, просто се фокусирайте върху VideoКомпонента. Първо, импортирайте Video от response-native-video и започнете да го използвате.

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

Нека да го разделим:

  • източник : пътят към видеото източник. Вместо това можете да използвате URL адреса:
source={{uri:"//youronlineVideo.mp4"}}
  • стил: костюмният стил, който искаме да придадем на видеото, и ключът към създаването на фоновото видео
  • resizeMode: в нашия случай е cover; можете да опитате и вие, contain or stretchно това няма да ни даде това, което искаме

А други подпори не са задължителни.

Нека да преминем към важната част: поставяне на видеото във фоново положение. Нека дефинираме стиловете.

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

Какво направихме тук?

Дадохме на видеото position :absoluteи му даваме прозореца heightна устройството. Използвахме Dimensionsот React Native, за да гарантираме, че видеото заема цялата височина - top:0, left:0,bottom:0,right:0- така че видеото да заема цялото пространство!

Целият код:

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

Също така можете да направите този компонент за многократна употреба, като направите следното:

  {this.props.children} 

И можете да го използвате с други компоненти:

Това е почти всичко. Благодаря ви, че прочетохте!

Научете повече за React Native:

  • Какво трябва да знаете, за да започнете да създавате мобилни приложения в React Native
  • Стил в React Native

Други публикации:

  • JavaScript ES6, пишете по-малко - Направете повече
  • Как да използваме маршрутизация във Vue.js, за да създадем по-добро потребителско изживяване
  • Ето най-популярните начини да направите HTTP заявка в JavaScript
Можете ли да ме намерите в Twitter?

Абонирайте се за моя пощенски списък, за да следите за предстоящите статии.