如何在React Native中将视频用作背景

In this post, we are going to create a backgroundVideo in React Native. If you have just started with React Native check out my article What you need to know to start building mobile apps with React N

cumian9828

778人浏览 · 2020-08-07 19:59:45

cumian9828 · 2020-08-07 19:59:45 发布

In this post, we are going to create a backgroundVideo in React Native. If you have just started with React Native check out my article What you need to know to start building mobile apps with React Native.

在本文中，我们将在React Native中创建一个backgroundVideo 。如果您刚刚开始使用React Native，请查看我的文章，开始使用React Nativ e 构建移动应用程序需要了解的内容。

Background video can add a nice effect to the UI of an app. They may be helpful also if you want to display, for example, ads or send a message to the user, like we’ll do here.

背景视频可以为应用程序的用户界面添加良好的效果。如果您想展示例如广告或向用户发送消息，它们也可能会有所帮助，就像我们将在此处做的那样。

You will need some basic requirements. To get started, you must have the react-native environment setup. That means you have:

您将需要一些基本要求。首先，您必须具有React本机环境设置。那意味着你有：

react-native-cli installed

已安装react-native-cli
Android SDK; if you have a mac you won’t need that, just Xcode
Android SDK；如果您拥有Mac，那么您将不需要Xcode

入门 (Getting started)

First things first, let’s bootstrap a new React Native app. In my case I’m using react-native-cli. So in your terminal run:

首先，让我们引导一个新的React Native应用程序。就我而言，我正在使用react-native-cli。因此，在您的终端运行：

react-native init myapp

This should install all the dependencies and packages to run your React Native app.

这应该安装所有依赖项和包以运行您的React Native应用程序。

Next step is to run and install the app on the simulator.

下一步是在模拟器上运行并安装该应用程序。

For iOS:

对于iOS：

react-native run-ios

This should open up the iOS simulator.

这应该打开iOS模拟器。

On Android:

在Android上：

react-native run-android

You may have some trouble with Android. I recommend that you use Genymotion and the Android emulator or check out this friendly guide to set up the environment.

您可能在Android上遇到了一些麻烦。我建议您使用Genymotion和Android模拟器，或者查阅此友好指南来设置环境。

First what we are going to do is clone the Peleton app’s home screen. We are using react-native-video for video streaming, and styled-component for styling. So you have to install them:

首先，我们要做的是克隆Peleton应用程序的主屏幕。我们将react-native-video用于视频流，并将styled-component用于样式。因此，您必须安装它们：

Yarn:
纱：

yarn add react-native-video styled-components

NPM
NPM

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

Then you need to link react-native-video because it contains native code — and for styled-components we don’t need that. So simply run:

然后，您需要链接react-native-video，因为它包含本机代码，对于styled-components ，则不需要它。因此，只需运行：

react-native link

You don’t have to worry about the other things, just focus on the Video Component. First, import Video from react-native-video and start using it.

您不必担心其他事情，只需关注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"}
/>

Let’s break it down:

让我们分解一下：

source: the path to the source video. You can use the URL instead:

source ：源视频的路径。您可以改用URL：

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

style: the costume style we want to give to the video, and the key to making the background video

style：我们要赋予视频的服装风格，以及制作背景视频的关键
resizeMode: in our case it is cover; you can try also contain or stretch but this won’t give us what we want

resizeMode：在我们的例子中是cover ; 您也可以尝试contain or stretch但这不会给我们我们想要的东西

And other props are optional.

其他道具是可选的。

Let’s move to the important part: placing the video in the background position. Let’s define the styles.

让我们转到重要的部分：将视频置于背景位置。让我们定义样式。

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

What did we do here?

我们在这里做了什么？

We gave the video a position :absolute and we give it the window height of the device. We used the Dimensions from React Native to ensure that the video is taking up the whole hight — top:0, left:0,bottom:0,right:0 — so that the video takes up all the space!

我们为视频指定了一个position :absolute并为其提供了设备的窗口height 。我们使用React Native的Dimensions来确保视频占据了整个高度-top top:0, left:0,bottom:0,right:0 ：以便视频占据所有空间！

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

Also, you can make this component reusable by doing the following:

另外，您可以通过执行以下操作使该组件可重用：

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

And you can use it with other components:

您可以将其与其他组件一起使用：

That’s pretty much it. Thank you for reading!

就是这样。感谢您的阅读！