创建LandingScreen

开放Beta测试文档 作为预发布开放Beta测试的一项内容，亚马逊提供了此技术文档。随着亚马逊收到反馈并对功能进行迭代，所描述的这些功能可能会发生变化。有关最新功能的信息，请参阅发行说明。

定义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',
  },
});

请注意，当我们刚将组件移到屏幕上后，不会立即注意到任何视觉变化。