Computer >> Máy Tính >  >> Điện thoại thông minh >> iPhone

Cách sử dụng video làm nền trong React Native

Trong bài đăng này, chúng ta sẽ tạo một backgroundVideo trong React Native. Nếu bạn mới bắt đầu với React Native, hãy xem bài viết của tôi Những điều bạn cần biết để bắt đầu xây dựng ứng dụng di động với React Native.

Cách sử dụng video làm nền trong React Native
Demo:Peleton Home Screen

Video nền có thể thêm hiệu ứng đẹp mắt vào giao diện người dùng của ứng dụng. Chúng cũng có thể hữu ích nếu bạn muốn hiển thị, chẳng hạn như quảng cáo hoặc gửi tin nhắn cho người dùng, giống như chúng tôi sẽ làm ở đây.

Bạn sẽ cần một số yêu cầu cơ bản. Để bắt đầu, bạn phải thiết lập môi trường gốc phản ứng. Điều đó có nghĩa là bạn có:

  • react-native-cli đã được cài đặt
  • Android SDK; nếu bạn có máy Mac, bạn sẽ không cần điều đó, chỉ cần Xcode

Bắt đầu

Đầu tiên, hãy khởi động một ứng dụng React Native mới. Trong trường hợp của tôi, tôi đang sử dụng react-native-cli. Vì vậy, khi chạy thiết bị đầu cuối của bạn:

react-native init myapp

Điều này sẽ cài đặt tất cả các gói và phụ thuộc để chạy ứng dụng React Native của bạn.

Bước tiếp theo là chạy và cài đặt ứng dụng trên trình mô phỏng.

Đối với iOS:

react-native run-ios

Thao tác này sẽ mở trình mô phỏng iOS.

Trên Android:

react-native run-android

Bạn có thể gặp một số rắc rối với Android. Tôi khuyên bạn nên sử dụng Genymotion và trình giả lập Android hoặc xem hướng dẫn thân thiện này để thiết lập môi trường.

Đầu tiên, những gì chúng ta sẽ làm là sao chép màn hình chính của ứng dụng Peleton. Chúng tôi đang sử dụng react-native-video để phát trực tuyến video và styled-component để tạo kiểu. Vì vậy, bạn phải cài đặt chúng:

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

Sau đó, bạn cần liên kết react-native-video vì nó chứa mã gốc - và cho styled-components chúng tôi không cần điều đó. Vì vậy, chỉ cần chạy:

react-native link

Bạn không phải lo lắng về những điều khác, chỉ cần tập trung vào Video Thành phần. Đầu tiên, hãy nhập Video từ video react-native-video và bắt đầu sử dụng nó. 

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

Hãy chia nhỏ nó:

  • nguồn :đường dẫn đến video nguồn. Bạn có thể sử dụng URL để thay thế:
source={{uri:"https://youronlineVideo.mp4"}}
  • kiểu: phong cách trang phục mà chúng tôi muốn đưa vào video và chìa khóa để tạo video nền
  • resizeMode:trong trường hợp của chúng tôi, nó là cover; bạn cũng có thể thử contain or stretch nhưng điều này sẽ không mang lại cho chúng tôi những gì chúng tôi muốn

Và các đạo cụ khác là tùy chọn.

Hãy chuyển sang phần quan trọng:đặt video ở vị trí nền. Hãy xác định các kiểu. 

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

Chúng tôi đã làm gì ở đây?

Chúng tôi đã cấp cho video là position :absolute và chúng tôi cung cấp cho nó cửa sổ height của thiết bị. Chúng tôi đã sử dụng Dimensions từ React Native để đảm bảo rằng video đang chiếm toàn bộ thời lượng - top:0, left:0,bottom:0,right:0 - để video chiếm hết dung lượng!

Toàn bộ mã:

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ách sử dụng video làm nền trong React Native

Ngoài ra, bạn có thể làm cho thành phần này có thể tái sử dụng bằng cách làm 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à bạn có thể sử dụng nó với các thành phần khác:

Nó khá là nhiều. Cảm ơn bạn đã đọc!

Cách sử dụng video làm nền trong React Native
Ảnh của David Boca trên Unsplash

Tìm hiểu thêm về React Native:

  • Những điều bạn cần biết để bắt đầu xây dựng ứng dụng dành cho thiết bị di động trong React Native
  • Tạo kiểu trong React Native

Các bài đăng khác:

  • JavaScript ES6, viết ít hơn - làm nhiều hơn
  • Cách sử dụng tính năng định tuyến trong Vue.js để tạo trải nghiệm người dùng tốt hơn
  • Dưới đây là những cách phổ biến nhất để thực hiện một yêu cầu HTTP trong JavaScript
Bạn có thể tìm thấy tôi trên Twitter?

Đăng ký danh sách Gửi thư của tôi để luôn theo dõi các bài viết sắp tới.