Πώς να χρησιμοποιήσετε το βίντεο ως φόντο στο React Native

Σε αυτήν την ανάρτηση, πρόκειται να δημιουργήσουμε ένα backgroundVideoστο React Native. Εάν μόλις ξεκινήσατε με το React Native, ρίξτε μια ματιά στο άρθρο μου Τι πρέπει να γνωρίζετε για να ξεκινήσετε τη δημιουργία εφαρμογών για κινητά με το React Native.

Το παρασκήνιο βίντεο μπορεί να προσθέσει ένα ωραίο εφέ στη διεπαφή χρήστη μιας εφαρμογής. Μπορεί να είναι χρήσιμα επίσης εάν θέλετε να εμφανίσετε, για παράδειγμα, διαφημίσεις ή να στείλετε ένα μήνυμα στον χρήστη, όπως θα κάνουμε εδώ.

Θα χρειαστείτε μερικές βασικές απαιτήσεις. Για να ξεκινήσετε, πρέπει να έχετε τη ρύθμιση περιβάλλοντος αντιδραστηρίου. Αυτό σημαίνει ότι έχετε:

  • εγκατεστημένο το react-native-cli
  • Android SDK; αν έχετε mac δεν θα το χρειαστείτε, απλά Xcode

Ξεκινώντας

Πρώτα πράγματα πρώτα, ας ξεκινήσουμε μια νέα εφαρμογή React Native. Στην περίπτωσή μου χρησιμοποιώ το react-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

Στη συνέχεια, πρέπει να συνδέσετε το react-native-video επειδή περιέχει εγγενή κώδικα - και για styled-componentsαυτό δεν το χρειαζόμαστε. Απλώς εκτελέστε:

react-native link

Δεν χρειάζεται να ανησυχείτε για τα άλλα πράγματα, απλώς επικεντρωθείτε στο VideoComponent. Αρχικά, εισαγάγετε βίντεο από το react-native-video και ξεκινήστε να το χρησιμοποιείτε.

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

Ας το σπάσουμε:

  • πηγή : η διαδρομή προς το βίντεο προέλευσης. Μπορείτε να χρησιμοποιήσετε τη διεύθυνση URL αντί:
source={{uri:"//youronlineVideo.mp4"}}
  • style: το στυλ κοστουμιών που θέλουμε να δώσουμε στο βίντεο και το κλειδί για τη δημιουργία του βίντεο φόντου
  • 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;

Εγγραφείτε στη λίστα αλληλογραφίας μου για να μείνετε συντονισμένοι για επερχόμενα άρθρα.