Sử Dụng Video Làm Background Trong React Native – Hướng Dẫn Bước Đi

Bài viết này tạo backgroundVideo trong React Native. Nếu mới bắt đầu React Native xem bài "What you need to know to start building mobile apps with React Native".

Background video thêm hiệu ứng đẹp cho UI app. Cũng hữu ích nếu muốn hiển thị quảng cáo hoặc gửi message cho user, như sẽ làm ở đây.

Cần yêu cầu cơ bản. Để bắt đầu, phải có react-native environment setup. Nghĩa là có:

• react-native-cli installed
• Android SDK; nếu Mac không cần, chỉ Xcode

Bắt Đầu

Trước hết, bootstrap app React Native mới. Tôi dùng react-native-cli. Terminal chạy:

react-native init myapp

Sẽ cài tất cả dependency và package chạy app React Native.

Bước tiếp theo chạy và cài app trên simulator.

iOS:

react-native run-ios

Sẽ mở iOS simulator.

Android:

react-native run-android

Có thể gặp khó khăn Android. Khuyên dùng Genymotion và Android emulator hoặc xem hướng dẫn thân thiện setup environment.

Đầu tiên clone home screen app Peleton. Dùng react-native-video cho video streaming, và styled-component cho styling. Cài đặt:

• Yarn:

yarn add react-native-video styled-components

• NPM

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

Sau đó link react-native-video vì chứa native code — và styled-components không cần. Chạy:

react-native link

Không lo các thứ khác, tập trung vào Component Video. Import Video từ react-native-video và bắt đầu dùng.

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

Phân tích:

• source: đường dẫn video nguồn. Có thể dùng URL:

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

• style: custom style cho video, key để làm background video
• resizeMode: trường hợp cover; thử contain or stretch nhưng không cho kết quả mong muốn

Các prop khác tùy chọn.

Chuyển phần quan trọng: đặt video vị trí background. Định nghĩa styles.

// Dùng StyleSheet từ react-native nên import nhé
//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
  }
});

Làm gì ở đây?

Cho video position :absolute và cho height cửa sổ thiết bị. Dùng Dimensions từ React Native đảm bảo video chiếm toàn bộ chiều cao — top:0, left:0,bottom:0,right:0 — video chiếm tất cả không gian!

Toàn bộ code:

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>
  );
};

Cũng có thể làm component reusable như sau:

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

Và dùng với component khác:

Đó là hầu như tất cả. Cảm ơn đã đọc!

Tìm Hiểu Thêm Về React Native:

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

Bài Viết Khác:

• 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

Tìm tôi trên Twitter ?

Đăng Ký Mailing List Để Cập Nhật Bài Viết Mới: