创建LandingScreen - Amazon Vega Docs

Amazon Developer

Console

as

Settings

Sign out

Notifications

Alexa

亚马逊应用商店

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上。
删除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日