home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> สมาร์ทโฟน >> iPhone

ใช้ Video เป็น Background ใน React Native – คู่มือขั้นตอนต่อขั้นตอน

บทความนี้จะสร้าง backgroundVideo ใน React Native หากเพิ่งเริ่ม React Native อ่านบทความ "What you need to know to start building mobile apps with React Native" ของผม

ใช้ Video เป็น Background ใน React Native – คู่มือขั้นตอนต่อขั้นตอน
Demo: Peleton Home Screen

Background Video เพิ่มเอฟเฟกต์ดีให้ UI แอป อาจช่วยถ้าอยากแสดง Ads หรือส่งข้อความให้ผู้ใช้ เช่นที่จะทำที่นี่

ต้องการ Basic Requirements เริ่มต้น ต้อง Setup React Native Environment หมายถึงมี:

  • react-native-cli ติดตั้งแล้ว
  • Android SDK; ถ้ามี Mac ไม่ต้อง SDK แค่ Xcode

เริ่มต้น

ก่อนอื่น Bootstrap React Native App ใหม่ กรณีผมใช้ react-native-cli ใน Terminal รัน:

react-native init myapp

ควรติดตั้ง Dependencies และ Packages สำหรับรัน React Native App

ขั้นตอนต่อไป รันและติดตั้งบน Simulator

สำหรับ iOS:

react-native run-ios

ควรเปิด iOS Simulator

สำหรับ Android:

react-native run-android

อาจมีปัญหา Android แนะนำ Genymotion และ Android Emulator หรือดูคู่มือ Setup Environment

ก่อนอื่น Clone หน้า Home ของ Peleton App ใช้ react-native-video สตรีมวิดีโอ และ styled-components สำหรับ Styling ติดตั้ง:

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

Link react-native-video เพราะมี Native Code — styled-components ไม่ต้อง Link รัน:

react-native link

ไม่ต้องกังวลอย่างอื่น โฟกัสที่ Component Video Import 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: Path ไปวิดีโอ Source ใช้ URL แทนได้:
source={{uri:"https://youronlineVideo.mp4"}}
  • style: Custom Style ให้ Video Key สำคัญทำ Background Video
  • resizeMode: กรณีนี้ cover ลอง contain or stretch แต่ไม่ได้สิ่งที่ต้องการ

Props อื่นๆ Optional

ไปส่วนสำคัญ: วาง Video ตำแหน่ง Background กำหนด Styles

// ใช้ StyleSheet จาก react-native อย่าลืม Import //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 } });

ทำอะไรบ้าง?

ให้ Video position: absolute และ Window height ของอุปกรณ์ ใช้ Dimensions จาก React Native ให้ Video ครอบความสูงทั้งหมด — top:0, left:0,bottom:0,right:0 Video ครอบพื้นที่ทั้งหมด!

โค้ดทั้งหมด:

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> ); };
ใช้ Video เป็น Background ใน React Native – คู่มือขั้นตอนต่อขั้นตอน

ยังทำ Component นี้ Reusable ได้โดย:

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

ใช้กับ Component อื่นได้:

ประมาณนี้ครับ ขอบคุณที่อ่าน!

ใช้ Video เป็น Background ใน React Native – คู่มือขั้นตอนต่อขั้นตอน
Photo by David Boca on Unsplash

เรียนรู้ React Native เพิ่มเติม:

  • What you need to know to start building mobile apps in React Native
  • Styling in React Native

บทความอื่นๆ:

  • JavaScript ES6, write Less — Do more
  • How to use routing in Vue.js to create a better user experience
  • Here are the most popular ways to make an HTTP request in JavaScript
หาผมได้ที่ Twitter ?

Subscribe Mailing List เพื่อติดตามบทความใหม่