ランディング画面の作成 - Amazon Vega Docs

Amazon Developer

Console

as

Settings

Sign out

Notifications

Alexa

Amazonアプリストア

Ring

AWS

ドキュメント

Support

Contact Us

My Cases

Console

as

Vega開発者向けドキュメント

開発

設計と開発

公開

リファレンス

サポート

LandingScreenの定義

次に、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',
  },
});

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

最終更新日 2026年10月26日