วิธีใช้วิดีโอเป็นพื้นหลังใน React Native

ในโพสต์นี้เราจะสร้าง backgroundVideo ใน React Native หากคุณเพิ่งเริ่มต้นกับ React Native โปรดดูบทความของฉัน สิ่งที่คุณต้องรู้เพื่อเริ่มสร้างแอปบนอุปกรณ์เคลื่อนที่ด้วย React Native

วิดีโอพื้นหลังสามารถเพิ่มเอฟเฟกต์ที่สวยงามให้กับ UI ของแอพได้ สิ่งเหล่านี้อาจมีประโยชน์เช่นกันหากคุณต้องการแสดง เช่น โฆษณาหรือส่งข้อความถึงผู้ใช้ อย่างที่เราทำที่นี่

คุณจะต้องมีข้อกำหนดพื้นฐานบางประการ ในการเริ่มต้น คุณต้องมีการตั้งค่าสภาพแวดล้อมแบบตอบสนองดั้งเดิม นั่นหมายความว่าคุณมี:

• ติดตั้ง 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 -i react-native-video styled-components --save

จากนั้นคุณต้องเชื่อมโยง react-native-video เพราะมันมีโค้ดเนทีฟ — และสำหรับ styled-components เราไม่ต้องการสิ่งนั้น เพียงแค่เรียกใช้:

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"}
/>

มาทำลายมันกันเถอะ:

• ที่มา :เส้นทางไปยังวิดีโอต้นทาง คุณสามารถใช้ URL แทน:

source={{uri:"https://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
}
});

พวกเรามาทำอะไรที่นี่?

เราให้วิดีโอ 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>

และใช้กับส่วนประกอบอื่นๆ ได้:

ที่สวยมากมัน ขอบคุณสำหรับการอ่าน!

เรียนรู้เพิ่มเติมเกี่ยวกับ React Native:

• สิ่งที่คุณต้องรู้เพื่อเริ่มสร้างแอปบนอุปกรณ์เคลื่อนที่ใน React Native
• การจัดสไตล์ใน React Native

โพสต์อื่นๆ:

• JavaScript ES6 เขียนน้อย — ทำมาก
• วิธีใช้การกำหนดเส้นทางใน Vue.js เพื่อสร้างประสบการณ์การใช้งานที่ดียิ่งขึ้น
• ต่อไปนี้คือวิธีที่นิยมที่สุดในการส่งคำขอ HTTP ใน JavaScript

คุณสามารถหาฉันใน Twitter ได้ไหม ?

สมัครรับจดหมายข่าวของฉันเพื่อติดตามบทความต่อไป