כיצד להשתמש בווידאו כרקע ב- React Native

בפוסט זה אנו הולכים ליצור backgroundVideoב- React Native. אם זה עתה התחלת עם React Native עיין במאמר שלי מה שאתה צריך לדעת כדי להתחיל בבניית יישומים ניידים עם React Native.

סרטון רקע יכול להוסיף אפקט יפה לממשק המשתמש של אפליקציה. הם עשויים להועיל גם אם ברצונך להציג, למשל, מודעות או לשלוח הודעה למשתמש, כמו שנעשה כאן.

תזדקק לכמה דרישות בסיסיות. כדי להתחיל, עליך להגדיר את הגדרת הסביבה הטבעית. זה אומר שיש לך:

  • התגובה- native-cli מותקנת
  • אנדרואיד SDK; אם יש לך מקינטוש אתה לא צריך את זה, רק Xcode

מתחילים

ראשית הדברים הראשונים, בואו נתחיל על אפליקציית React Native חדשה. במקרה שלי אני משתמש בתגובה-קלי. אז בריצה למסוף שלך:

react-native init myapp

זה אמור להתקין את כל התלות והחבילות להפעלת האפליקציה React Native.

השלב הבא הוא להריץ ולהתקין את האפליקציה בסימולטור.

עבור iOS:

react-native run-ios

זה אמור לפתוח את סימולטור iOS.

באנדרואיד:

react-native run-android 

יתכן שתתקשה עם Android. אני ממליץ לך להשתמש ב- Genymotion ובאמולטור האנדרואיד או לבדוק את המדריך הידידותי הזה כדי להגדיר את הסביבה.

ראשית מה שאנחנו הולכים לעשות הוא לשכפל את מסך הבית של אפליקציית Peleton. אנו משתמשים react-native-videoלסטרימינג בווידאו styled-componentולסטיילינג. אז אתה צריך להתקין אותם:

  • חוּט:
yarn add react-native-video styled-components
  • NPM
npm -i react-native-video styled-components --save

אז אתה צריך לקשר תגובה-וידאו-וידאו כי הוא מכיל קוד מקורי - ובשביל styled-componentsאנחנו לא צריכים את זה. אז פשוט רוץ:

react-native link

אתה לא צריך לדאוג לשאר הדברים, רק להתמקד Videoברכיב. ראשית, ייבא וידיאו מ- react-native-video והתחל להשתמש בו.

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

בואו נשבר את זה:

  • מקור : הנתיב לסרטון המקור. תוכל להשתמש בכתובת האתר במקום זאת:
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 } });

מה עשינו כאן?

נתנו לסרטון a position :absoluteואנחנו נותנים לו את חלון heightהמכשיר. השתמשנו ב- DimensionsReact 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
אתה יכול למצוא אותי בטוויטר?

הירשם לרשימת התפוצה שלי כדי להתעדכן בכתבות הקרובות.