React Nativeで動画を背景に使う方法をわかりやすく解説

この記事では、React Nativeで背景動画（backgroundVideo）を作成する方法を解説します。React Nativeを始めたばかりの方は、まず「React Nativeでモバイルアプリ開発を始めるために知っておくべきこと」といった入門記事を読んでおくと理解がスムーズになります。

背景動画はアプリのUIに洗練された印象を与える演出手段です。広告の表示やユーザーへのメッセージ伝達など、さまざまな用途に活用できます。今回はPeletonアプリのホーム画面のようなデザインを目標に、実装方法を見ていきましょう。

前提条件

実装を始める前に、以下の環境が整っている必要があります。

• react-native-cli がインストールされていること
• Android SDK（Macの場合はXcodeだけでOK）

プロジェクトの作成

まずは新しいReact Nativeアプリを作成します。ターミナルで以下のコマンドを実行してください。

react-native init myapp

これにより、React Nativeアプリの実行に必要な依存関係とパッケージがすべてインストールされます。

次に、シミュレーター上でアプリを起動します。

iOSの場合：

react-native run-ios

このコマンドでiOSシミュレーターが開きます。

Androidの場合：

react-native run-android

Android環境ではエラーが出ることがあります。その場合はGenymotionなどのAndroidエミュレーターの利用をおすすめします。環境構築ガイドを参考にセットアップしておくと安心です。

必要なライブラリのインストール

今回は動画ストリーミングのために react-native-video を、スタイリングのために styled-components を使用します。以下のコマンドでインストールしましょう。

Yarnを使う場合：

yarn add react-native-video styled-components

NPMを使う場合：

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

react-native-videoはネイティブコードを含むため、ネイティブモジュールとの連携が必要です。古いバージョンのReact Nativeでは以下のコマンドを実行していました。

react-native link

なお、比較的新しいReact Native（0.60以降）ではオートリンク機能があるため、この手順は不要です。また、styled-components は純粋なJavaScriptライブラリなので、リンク作業は一切必要ありません。

Videoコンポーネントの基本

まずはreact-native-videoからVideoをインポートし、基本的な使い方を確認しましょう。

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

主要なpropsを分解してみましょう。

• source: 動画ファイルへのパスです。ローカルファイルの代わりにオンラインURLも使えます。

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

• style: 動画に適用するカスタムスタイル。ここが背景動画を実現する鍵になります。
• resizeMode: 今回は cover を指定します。contain や stretch も試せますが、画面全体を覆う背景には cover が最適です。

その他のprops（muted、repeatなど）は任意ですが、背景動画としては無音・ループ再生が一般的なので設定しておくと良いでしょう。

動画を背景に配置するスタイル定義

ここからが重要なポイントです。動画を背景として配置するためのスタイルを定義していきます。

// StyleSheetとDimensionsをreact-nativeからインポートすること
// import { StyleSheet, Dimensions } 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" を指定し、Dimensions で取得したデバイスのウィンドウ高さを設定しています。さらに top: 0, left: 0, bottom: 0, right: 0 を指定することで、動画が画面全体にぴったり収まるようになります。

完全なコード例

Peleton風ホーム画面の完全なコードは以下の通りです。

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-componentsによるスタイル定義

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

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

再利用可能なコンポーネントにする

この背景動画コンポーネントを汎用化したい場合は、this.props.children を活用しましょう。

<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-videoのVideoコンポーネントと絶対配置のスタイルを組み合わせるだけで、印象的なUIを簡単に作れます。ぜひ自分のアプリにも取り入れてみてください。

最新記事の情報はメーリングリストの登録やSNSフォローでお見逃しなく！