ランディング画面の作成

オープンベータ版ドキュメント：本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、リリースノートを参照してください。

LandingSceeenの定義

次に、HeaderコンポーネントとVideoコンポーネントをLandingScreenという画面に追加しましょう。

srcの下にscreensという名前の新しいフォルダを作成し、その中にLandingScreen.tsxという名前のファイルを作成します。

src/
├── screens/
│   └── LandingScreen.tsx
└── App.tsx

LandingScreen.tsxで、React、およびHeaderコンポーネントとVideoCardコンポーネントをインポートします。
「LandingScreen」というコンポーネントを作成してエクスポートします。これはHeaderコンポーネントとVideoCardコンポーネントを返します。
コンポーネントを空のフラグメントでラップします。

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

クリップボードにコピーしました。

import * as React from 'react';
import Header from '../components/Header';
import VideoCard from '../components/VideoCard';

const LandingScreen = () => {
  return (
    <>
      <Header />
      <VideoCard />
    </>
  );
};

export default LandingScreen;

LandingScreenのレンダリング

定義したLandingScreenを使用するには、アプリを更新する必要があります。

App.tsxを開き、LandingScreenをインポートします。
HeaderとVideoCardがLandingScreen画面にレンダリングされるようになったため、これらのimportステートメントを削除します。
returnステートメントのHeaderコンポーネントとVideoCardコンポーネント、および空のタグを削除し、それらをLandingScreenに置き換えます。

するとApp.tsxファイルは次のようになります。

クリップボードにコピーしました。

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import LandingScreen from './screens/LandingScreen';

export const App = () => {
  return (
    <View style={styles.container}>
      <LandingScreen />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#232F3E',
  },
});

コンポーネントを画面に移動しただけであるため、視覚的な変更に気付かないことに注意してください。