as

Settings
Sign out
Notifications
Alexa
亚马逊应用商店
AWS
文档
Support
Contact Us
My Cases
新手入门
设计和开发
应用发布
参考
支持
感谢您的访问。此页面目前仅提供英语版本。我们正在开发中文版本。谢谢您的理解。

Create the Landing Screen

Define the LandingSceeen

Now let's add the Header and Video components to a screen called LandingScreen.

  • Create a new folder under src called screens, and within it create a file called LandingScreen.tsx.
src/
├── screens/
│   └── LandingScreen.tsx
└── App.tsx
  • Import React, and the Header and VideoCard components in LandingScreen.tsx
  • Create and export a component called "LandingScreen", which returns the Header and VideoCard components.
  • Wrap the components in an empty fragment.

The LandingScreen.tsx code should look like this:

Copied to clipboard.

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

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

export default LandingScreen;

Render the LandingScreen

Now that we have our LandingScreen defined, we need to update the app to use it.

  • Open App.tsx and import the LandingScreen.
  • Remove the import statements for Header and VideoCard, as they are now rendered in the LandingScreen screen.
  • Remove the Header and VideoCard components and the empty tags in the return statement, and replace them with the LandingScreen.

The App.tsx file should now look like this:

Copied to clipboard.

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

Note that you won't notice any visual changes as we have just moved the components into a screen.