Sådan bruges video som baggrund i React Native

I dette indlæg skal vi oprette en backgroundVideoi React Native. Hvis du lige er startet med React Native, skal du tjekke min artikel Hvad du har brug for at vide for at begynde at opbygge mobile apps med React Native.

Baggrundsvideo kan tilføje en flot effekt til brugergrænsefladen i en app. De kan også være nyttige, hvis du f.eks. Vil vise annoncer eller sende en besked til brugeren, som vi gør her.

Du har brug for nogle grundlæggende krav. For at komme i gang skal du have opsætningen af ​​det reaktive native miljø. Det betyder, at du har:

  • react-native-cli installeret
  • Android SDK; hvis du har en mac, har du ikke brug for det, bare Xcode

Kom godt i gang

Første ting først, lad os starte en ny React Native-app. I mit tilfælde bruger jeg react-native-cli. Så i din terminalkørsel:

react-native init myapp

Dette skal installere alle afhængigheder og pakker til at køre din React Native-app.

Næste trin er at køre og installere appen på simulatoren.

Til iOS:

react-native run-ios

Dette skal åbne iOS-simulatoren.

På Android:

react-native run-android 

Du har muligvis problemer med Android. Jeg anbefaler, at du bruger Genymotion og Android-emulatoren eller tjekker denne venlige guide til at oprette miljøet.

Først skal vi klone Peleton-appens startskærm. Vi bruger react-native-videotil videostreaming og styled-componenttil styling. Så du skal installere dem:

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

Derefter skal du linke react-native-video, fordi den indeholder native code - og for styled-componentsvi har ikke brug for det. Så bare løb:

react-native link

Du behøver ikke bekymre dig om de andre ting, bare fokuser på Videokomponenten. Først skal du importere video fra react-native-video og begynde at bruge den.

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

Lad os nedbryde det:

  • kilde : stien til kildevideoen. Du kan bruge URL'en i stedet:
source={{uri:"//youronlineVideo.mp4"}}
  • stil: den kostumestil, vi vil give til videoen, og nøglen til at lave baggrundsvideoen
  • resizeMode: i vores tilfælde er det cover; du kan også prøve, contain or stretchmen dette giver os ikke, hvad vi vil

Og andre rekvisitter er valgfri.

Lad os gå til den vigtige del: placere videoen i baggrundspositionen. Lad os definere typografierne.

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

Hvad gjorde vi her?

Vi gav videoen en, position :absoluteog vi giver den vinduet heightpå enheden. Vi brugte Dimensionsfra React Native til at sikre, at videoen tager hele højden - top:0, left:0,bottom:0,right:0- så videoen optager al plads!

Hele koden:

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

Du kan også gøre denne komponent genanvendelig ved at gøre følgende:

  {this.props.children} 

Og du kan bruge det med andre komponenter:

Det er stort set det. Tak fordi du læste!

Lær mere om React Native:

  • Hvad du har brug for at vide for at begynde at opbygge mobilapps i React Native
  • Styling i React Native

Andre stillinger:

  • JavaScript ES6, skriv mindre - gør mere
  • Sådan bruges routing i Vue.js til at skabe en bedre brugeroplevelse
  • Her er de mest populære måder at lave en HTTP-anmodning i JavaScript på
Kan du finde mig på Twitter?

Abonner på min mailingliste for at holde øje med kommende artikler.