React Native에서 비디오를 배경으로 사용하는 방법

이 게시물에서는 backgroundVideo을 생성할 것입니다. 리액트 네이티브에서 React Native를 막 시작했다면 제 기사 React Native로 모바일 앱 빌드를 시작하기 위해 알아야 할 사항을 확인하세요.

배경 비디오는 앱의 UI에 멋진 효과를 추가할 수 있습니다. 예를 들어 여기에서 하는 것처럼 사용자에게 광고를 표시하거나 메시지를 보내려는 경우에도 도움이 될 수 있습니다.

몇 가지 기본 요구 사항이 필요합니다. 시작하려면 반응 네이티브 환경 설정이 있어야 합니다. 즉:

• react-native-cli 설치
• 안드로이드 SDK; Mac이 있는 경우 필요하지 않습니다. Xcode만 있으면 됩니다.

시작하기

먼저 새로운 React Native 앱을 부트스트랩해 보겠습니다. 제 경우에는 react-native-cli를 사용하고 있습니다. 따라서 터미널 실행:

react-native init myapp

이것은 React Native 앱을 실행하기 위해 모든 종속성과 패키지를 설치해야 합니다.

다음 단계는 시뮬레이터에서 앱을 실행하고 설치하는 것입니다.

iOS의 경우:

react-native run-ios

그러면 iOS 시뮬레이터가 열립니다.

안드로이드:

react-native run-android 

Android에 문제가 있을 수 있습니다. Genymotion과 Android 에뮬레이터를 사용하거나 이 친숙한 가이드를 확인하여 환경을 설정하는 것이 좋습니다.

먼저 Peleton 앱의 홈 화면을 복제할 것입니다. react-native-video를 사용하고 있습니다. 비디오 스트리밍용 및 styled-component 스타일링을 위해. 따라서 설치해야 합니다.

• 실:

yarn add react-native-video styled-components

• NPM

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

그런 다음 네이티브 코드가 포함되어 있고 styled-components에 대해 react-native-video를 연결해야 합니다. 우리는 그것을 필요로하지 않습니다. 따라서 간단히 실행하십시오.

react-native link

다른 것은 신경쓰지 말고 Video에만 집중하세요. 요소. 먼저 react-native-video에서 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 요청을 수행하는 가장 인기 있는 방법은 다음과 같습니다.

트위터에서 저를 찾을 수 있습니까?

내 메일링 리스트를 구독하여 향후 기사를 계속 지켜봐 주십시오.