ビデオの詳細画面の作成

VideoDetailScreenの定義

ナビゲーションパッケージを追加する前に、どこかにナビゲートする必要があるので、ビデオ詳細画面を作成する必要があります。この画面には、背景画像、ビデオタイトル、ビデオの説明があり、最終的には再生と戻るボタンも追加します。

screensフォルダの下に、VideoDetailScreen.tsxという名前の新しいファイルを作成します。
そのファイルを開いてReactをインポートし、必要なコンポーネントを「react-native」からインポートします。この例では、ImageBackground、Text、View、StyleSheetが必要です。
VideoDetailScreenというアロー関数を作成してエクスポートします。
親要素となるImageBackgroundタグを含むreturnステートメントをVideoDetailScreenに追加します。
ImageBackgroundにsourceプロパティを追加し、{uri: 'placeholder'}としてハードコードします。
ImageBackground内に、タイトル用と説明用に1つずつ、2つのText要素を追加します。最初の要素に「ビデオタイトル」というテキストを、もう一方の要素に「ビデオの説明」というテキストを追加します。

import React from 'react';
import {ImageBackground, Text, View, StyleSheet} from 'react-native';

const VideoDetailScreen = () => {
  return (
    <ImageBackground
       source={{
        uri: 'placeholder',
      }}>
      <Text>ビデオタイトル</Text>
      <Text>ビデオの説明</Text>
    </ImageBackground>
  );
};

export default VideoDetailScreen;

スタイルの追加

スタイルを追加しましょう。

stylesというStyleSheetを作成し、VideoDetailScreenアロー関数の後に追加します。
以下の値を使用して、image、screenContainer、videoTitle、videoDescriptionの各スタイルをStyleSheetに追加します。

const styles = StyleSheet.create({
  image: {
    opacity: 0.2
  },
  screenContainer: {
    display: 'flex',
    height: '100%',
    justifyContent: 'center',
    padding: 10
  },
  videoTitle: {
    fontSize: 40,
    color: 'white',
    fontWeight: '700'
  },
  videoDescription: {
    color: 'white',
    fontSize: 20
  },
});

それぞれの要素にスタイルを追加します。

const VideoDetailScreen = () => {
  return (
    <ImageBackground
      source={{
        uri: 'placeholder',
      }}
      imageStyle={styles.image}
      style={styles.screenContainer}>
      <Text style={styles.videoTitle}>ビデオタイトル</Text>
      <Text style={styles.videoDescription}>ビデオの説明</Text>
    </ImageBackground>
  );
  
};

VideoDetailScreen.tsxのコードは次のようになります。

import React from 'react';
import { ImageBackground, Text, View, StyleSheet } from 'react-native';

const VideoDetailScreen = () => {
  return (
    <ImageBackground
      source={{
        uri: 'placeholder',
      }}
      imageStyle={styles.image}
      style={styles.screenContainer}>
      <Text style={styles.videoTitle}>ビデオタイトル</Text>
      <Text style={styles.videoDescription}>ビデオの説明</Text>
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  image: {
    opacity: 0.2
  },
  screenContainer: {
    display: 'flex',
    height: '100%',
    justifyContent: 'center',
    padding: 10
  },
  videoTitle: {
    fontSize: 50,
    color: 'white',
    fontWeight: '700'
  },
  videoDescription: {
    color: 'white',
    fontSize: 30
  }
});

export default VideoDetailScreen;

Screensフォルダ内のインデックスファイルの更新

最後に、この画面をscreensフォルダのindex.tsファイルに追加します。

screensフォルダでindex.tsを開きます。
importステートメントとexportステートメントにVideoDetailScreenを追加します。

更新されたindex.tsファイルは次のようになります。

import LandingScreen from './LandingScreen';
import VideoDetailScreen from './VideoDetailScreen';


export {
    LandingScreen,
    VideoDetailScreen
}

​VideoDetailScreenの定義

​スタイルの追加

​Screensフォルダ内のインデックスファイルの更新

VideoDetailScreenの定義

スタイルの追加

Screensフォルダ内のインデックスファイルの更新