Hvordan bruke video som bakgrunn i React Native

I dette innlegget skal vi lage en backgroundVideoi React Native. Hvis du nettopp har begynt med React Native, sjekk artikkelen min Hva du trenger å vite for å begynne å bygge mobilapper med React Native.

Bakgrunnsvideo kan legge til en fin effekt i brukergrensesnittet til en app. De kan være nyttige også hvis du vil vise for eksempel annonser eller sende en melding til brukeren, slik vi vil gjøre her.

Du trenger noen grunnleggende krav. For å komme i gang, må du ha oppsett for reageringsmiljø. Det betyr at du har:

  • react-native-cli installert
  • Android SDK; hvis du har en Mac, trenger du ikke det, bare Xcode

Starter

Første ting først, la oss starte en ny React Native-app. I mitt tilfelle bruker jeg react-native-cli. Så i terminalkjøringen:

react-native init myapp

Dette bør installere alle avhengigheter og pakker for å kjøre React Native-appen.

Neste trinn er å kjøre og installere appen på simulatoren.

For iOS:

react-native run-ios

Dette skal åpne iOS-simulatoren.

På Android:

react-native run-android

Du kan ha noen problemer med Android. Jeg anbefaler at du bruker Genymotion og Android-emulatoren eller sjekker ut denne vennlige guiden for å sette opp miljøet.

Først det vi skal gjøre er å klone Peleton-appens startskjerm. Vi bruker react-native-videofor videostreaming og styled-componentfor styling. Så du må installere dem:

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

Da må du koble react-native-video fordi den inneholder native code - og for styled-componentsvi trenger ikke det. Så bare løp:

react-native link

Du trenger ikke å bekymre deg for de andre tingene, bare fokuser på Videokomponenten. Først importerer du video fra react-native-video og begynner å bruke den.

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

La oss bryte det ned:

  • kilde : stien til kildevideoen. Du kan bruke URL-en i stedet:
source={{uri:"//youronlineVideo.mp4"}}
  • stil: kostymestilen vi ønsker å gi til videoen, og nøkkelen til å lage bakgrunnsvideoen
  • resizeMode: i vårt tilfelle er det cover; du kan også prøve, contain or stretchmen dette gir oss ikke det vi ønsker

Og andre rekvisitter er valgfrie.

La oss gå til den viktige delen: plassere videoen i bakgrunnsposisjonen. La oss definere stilene.

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

Hva gjorde vi her?

Vi ga videoen en, position :absoluteog vi gir den vinduet heightpå enheten. Vi brukte Dimensionsfra React Native for å sikre at videoen tar opp hele høyden - top:0, left:0,bottom:0,right:0- slik at videoen tar opp all plassen!

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å gjøre denne komponenten gjenbrukbar ved å gjøre følgende:

  {this.props.children}

Og du kan bruke den med andre komponenter:

Det er ganske mye det. Takk for at du leser!

Lær mer om React Native:

  • Hva du trenger å vite for å begynne å bygge mobilapper i React Native
  • Styling i React Native

Andre innlegg:

  • JavaScript ES6, skriv mindre - gjør mer
  • Hvordan bruke ruting i Vue.js for å skape en bedre brukeropplevelse
  • Her er de mest populære måtene å lage en HTTP-forespørsel i JavaScript
Kan du finne meg på Twitter?

Abonner på adresselisten min for å holde deg oppdatert på kommende artikler.