Kuinka käyttää videota taustana React Native -sovelluksessa

Tässä viestissä aiomme luoda backgroundVideoReact Native -sovelluksen. Jos olet juuri aloittanut React Native -ohjelman, tutustu artikkeliin, joka sinun on tiedettävä aloittaaksesi mobiilisovellusten rakentamisen React Native -ohjelmalla.

Taustavideo voi lisätä mukavan vaikutuksen sovelluksen käyttöliittymään. Ne voivat olla hyödyllisiä myös, jos haluat näyttää esimerkiksi mainoksia tai lähettää käyttäjälle viestin, kuten teemme täällä.

Tarvitset joitain perusvaatimuksia. Aloittamiseksi sinulla on oltava reagoivan ympäristön asetukset. Tämä tarkoittaa, että sinulla on:

  • react-native-cli asennettu
  • Android SDK; jos sinulla on Mac, et tarvitse sitä, vain Xcode

Päästä alkuun

Ensinnäkin, käynnistetään uusi React Native -sovellus. Minun tapauksessani käytän reag-native-cliä. Joten päätelaitteellasi:

react-native init myapp

Tämän pitäisi asentaa kaikki riippuvuudet ja paketit React Native -sovelluksen ajamiseksi.

Seuraava vaihe on suorittaa ja asentaa sovellus simulaattoriin.

IOS:

react-native run-ios

Tämän pitäisi avata iOS-simulaattori.

Android:

react-native run-android 

Sinulla voi olla ongelmia Androidin kanssa. Suosittelen, että käytät ympäristöä luomalla Genymotionia ja Android-emulaattoria tai tutustu tähän ystävälliseen oppaaseen.

Ensinnäkin aiomme kloonata Peleton-sovelluksen aloitusnäytön. Käytämme react-native-videovideoiden suoratoistoon ja styled-componentmuotoiluun. Joten sinun on asennettava ne:

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

Sitten sinun on linkitettävä reagoiva-natiivi-video, koska se sisältää natiivikoodin - styled-componentsemmekä sitä tarvitse. Joten yksinkertaisesti ajaa:

react-native link

Sinun ei tarvitse huolehtia muista asioista, keskity vain Videokomponenttiin. Tuo ensin video reagoivasta videosta ja aloita sen käyttö.

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

Jaetaan se:

  • lähde : polku lähdevideoon. Voit käyttää URL-osoitetta sen sijaan:
source={{uri:"//youronlineVideo.mp4"}}
  • tyyli: pukutyyli, jonka haluamme antaa videolle, ja avain taustavideon tekemiseen
  • resizeMode: meidän tapauksessamme se on cover; voit kokeilla myös, contain or stretchmutta se ei anna meille mitä haluamme

Ja muut rekvisiitta ovat valinnaisia.

Siirrytään tärkeään osaan: videon sijoittamiseen taustakohtaan. Määritetään tyylit.

// 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ä teimme täällä?

Annoimme videolle a position :absoluteja annamme sille laitteen ikkunan height. Käytimme DimensionsReact Native -sovelluksesta varmistaaksemme, että video vie koko korkeuden - top:0, left:0,bottom:0,right:0- niin että video vie kaiken tilan!

Koko koodi:

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

Voit myös tehdä tämän komponentin uudelleenkäytettäväksi seuraavasti:

  {this.props.children} 

Ja voit käyttää sitä muiden komponenttien kanssa:

Se on melkein se. Kiitos, että luit!

Lisätietoja React Native:

  • Mitä sinun on tiedettävä aloittaaksesi mobiilisovellusten rakentamisen React Native -sovelluksessa
  • Tyylitys React Native -sovelluksessa

Muut viestit:

  • JavaScript ES6, kirjoita vähemmän - tee enemmän
  • Kuinka käyttää Vue.js-reititystä paremman käyttökokemuksen luomiseen
  • Tässä on suosituimpia tapoja tehdä HTTP-pyyntö JavaScript-muodossa
Löydätkö minut Twitteristä?

Tilaa postituslistani pysyäksesi ajan tasalla tulevista artikkeleista.