چگونه در React Native یک ویدیو پس‌زمینه بسازیم؟

در این پست، ما یک backgroundVideo را در React Native خواهیم ساخت. اگر به تازگی کار با React Native را شروع کرده‌اید، می‌توانید نگاهی به دوره مربوطه بر روی راکت داشته باشید.

ویدیو پس‌زمینه می‌تواند یک جلوه زیبا را به رابط کاربری هر برنامه‌ای اضافه کند. این ویدیوها همچنین اگر می‌خواهید برای مثال تبلیغاتی را نمایش دهید،‌ و یا این که یک پیغام را به کاربر ارسال کنید، کاربردی هستند.

شما به برخی نیازمندی‌های پایه احتیاج خواهید داشت. برای شروع کار، شما باید محیط react-native را راه‌اندازی کرده باشید. این یعنی شما:

• react-native-cli را نصب کرده‌اید.
• Android SDK را نصب کرده‌اید. البته اگر یک دستگاه mac‌ دارید، به آن نیاز نخواهید داشت؛ فقط Xcode.

شروع کار

اول از همه این که بیایید یک برنامه React Native جدید را bootstrap کنیم. من در این مورد از react-native-cli استفاده می‌کنم. پس این کد را در ترمینال خود اجرا کنید:

react-native init myapp

این باید تمام dependencyها و پکیج‌های مورد نیاز برای اجرای برنامه React Native شما را نصب کند.

قدم بعدی، نصب و اجرای برنامه بر روی شبیه‌ساز است.

برای iOS:

react-native run-ios

این باید شبیه‌ساز iOS را باز کند.

بر روی اندروید:

react-native run-android 

شاید شما با اندروید کمی مشکل داشته باشید. من استفاده از Genymotion و Android Emulator را پیشنهاد می‌کنم.

اولین کاری که ما می‌خواهیم انجام دهیم، کپی کردن صفحه اصلی برنامه Peleton است. ما در حال استفاده از react-native-video برای پخش ویدیو، و styled-component براس استایل‌بندی هستیم. پس شما باید آن‌ها را نصب کنید:

Yarn:

yarn add react-native-video styled-components

Npm:

npm -i react-native-video styled-components --save

سپس شما باید react-native-video را لینک کنید؛ زیرا شامل کد بومی می‌باشد و ما برای styled-component‌ به آن نیاز نداریم. پس به سادگی این کد را اجرا کنید:

react-native link

نیازی نیست که نگران چیزهای دیگر باشید؛ فقط بر روی کامپوننت Video تمرکز کنید. اول، ویدیو مورد نظر را از react-native-video وارد کنید و شروع به استفاده از آن نمایید.

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

source={require("./../assets/video1.mp4")}

style={styles.backgroundVideo}

muted={true}

repeat={true}

resizeMode={"cover"}

rate={1.0}

ignoreSilentSwitch={"obey"}

/>

بیایید آن را تجزیه کنیم:

• source: مسیر ویدیو منبع. شما می‌توانید در عوض از URL مورد نظر استفاده کنید:

source={{uri:"https://youronlineVideo.mp4"}}

• style: استایل ظاهری‌ای که می‌خواهیم به ویدیو بدهیم، و کلید ساختن ویدیو پس‌زمینه.
• resizeMode: در این مورد، resizeMode برابر با cover می‌باشد. شما همچنین می‌توانید contain or stretch‌ را هم امتحان کنید، اما این چیزی که می‌خواهیم را به ما نخواهد داد.

و propهای دیگر هم اختیاری هستند.

بیایید به سراغ بخش مهم برویم: قرار دادن ویدیو در موقعیت پس‌زمینه. بیایید استایل‌ها را تعریف کنیم.

// 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 (

      <View>

        <Video

          source={require("./../assets/video1.mp4")}

          style={styles.backgroundVideo}

          muted={true}

          repeat={true}

          resizeMode={"cover"}

          rate={1.0}

          ignoreSilentSwitch={"obey"}

        />



        <Wrapper>

          <Logo

            source={require("./../assets/cadence-logo.png")}

            width={50}

            height={50}

            resizeMode="contain"

          />

          <Title>Join Live And on-demand classes</Title>

          <TextDescription>

            With world-class instructions right here, right now

          </TextDescription>

          <ButtonWrapper>

            <Fragment>

              <Button title="Create Account" />

              <Button transparent title="Login" />

            </Fragment>

          </ButtonWrapper>

        </Wrapper>

      </View>

    );

  }

}



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 (

    <StyledButton {...props}>

      <StyledTitle {...props}>{props.title}</StyledTitle>

    </StyledButton>

  );

};

و شما همچنین می‌توانید با استفاده از این کد، قابلیت استفاده مجدد را به این کامپوننت بدهید:

<View>
<Video

source={require("./../assets/video1.mp4")}

style={styles.backgroundVideo}

muted={true}

repeat={true}

resizeMode={"cover"}

rate={1.0}

ignoreSilentSwitch={"obey"}

/>

{this.props.children}
</View>

و می‌توانید از آن به همراه کامپوننت‌های دیگر استفاده کنید:

import React, { Component } from "react";

import {

  Text,

  View,

  StyleSheet,

} from "react-native";

import BackgroundVideo from './backgrounVideo.js'

class OtherComponent extends Component {

render() {

return (

<BackgroundVideo>

<View>

<Text>Login page!</Text>

<View>

</BackgroundVideo>

)}

}

و در اینجا کار ما به پایان می‌رسد. بابت وقتی که بابت خواندن این مقاله صرف کردید، ممنونم.

منبع