创建Header组件

定义Header组件

让我们从创建Header组件开始。

• 在VS Code中，打开我们刚刚在设置模块中创建的基本演示应用的文件夹。
• 在src文件夹中创建一个名为components的文件夹。该文件夹可能已经存在于模板中，在这种情况下应删除其内容。
• 在components文件夹内创建一个名为Header.tsx的文件，如下所示：

src/
├── components/
│   └── Header.tsx
└── App.tsx

• 打开Header.tsx并导入React（参见下面的代码）。我们需要导入React，因为我们将要编写的JSX将使用JSX转换器转换为React组件。
• 从react-native中导入需要的组件来构建Header。我们将需要一个StyleSheet、一个Text组件和一个View组件。

import * as React from 'react';
import {StyleSheet, Text, View} from 'react-native';

您可能想知道为什么StyleSheet、Text和View都包含在大括号内。这是因为它们是命名导出。您将在第2部分中了解更多相关信息。

• 声明名为“Header”的功能组件 - 在进行该操作时，您可以将其声明为箭头函数，也可以将其声明为函数（本指南将全篇使用箭头函数）。

const Header = () => {
  // 或者函数Header () {
};

• 返回一个View组件，其中包含一个带有欢迎消息“Welcome to Vega!”（欢迎来到Vega！）的Text组件。

const Header = () => {
  return (
    <View>
      <Text>欢迎使用Vega！</Text>
    </View>
  );
};

我们将Text组件包裹在View组件中，因为后者便于更轻松地在屏幕上定位。Text组件不像View那样使用FlexBox布局系统（有关详细信息，请参阅此处 [仅提供英文版]）。将它包裹在View中可让我们使用FlexBox布局系统将Text组件放置在所需的位置。

最后，我们需要导出我们的组件。您可以在定义组件时将其导出：export const MyComponent = () => {};但是，如果导出的组件将仅导入一次，或者文件只导出一项内容，通常使用默认导出（进一步阅读 [仅提供英文版]）。

• 在下面添加导出声明：

export default Header;

我们的Header.tsx代码现在应该如下所示：

import * as React from 'react';
import {StyleSheet, Text, View} from 'react-native';

const Header = () => {
  return (
    <View>
      <Text>欢迎使用Vega！</Text>
    </View>
  );
};

export default Header;

添加样式

现在有了第一个组件，我们可以为其添加样式。

StyleSheet是一种类似于CSS StyleSheet的抽象样式表。但是，与CSS不同，您不能在相同类型的元素之间层叠样式。例如，如果在具有相同样式的单独文件中有一个<View>元素，则必须创建一个StyleSheet并在每个文件中定义其样式。

• 在使用Header箭头函数之后，使用headerContainer和headerText部分创建一个名为styles的新StyleSheet。

const styles = StyleSheet.create({
  headerContainer: {
    padding: 10,
    alignItems: 'center',
    backgroundColor: '#232F3E',
    width: '100%',
  },
  headerText: {
    fontSize: 50,
    fontWeight: '700',
    color: '#FF9900',
  },
});

headerContainer样式将Text组件居中并填充屏幕的宽度。headerText样式会更改文本的大小、粗细和颜色。除了十六进制代码外，您还可以将颜色设置为RGB值（例如“rgb(50, 50, 50)”）或命名颜色（例如“gray”）。

• 将headerContainer样式添加到View元素，将headerText样式添加到Text元素。

<View style={styles.headerContainer}>
  <Text style={styles.headerText}>Welcome to Vega!</Text>
</View>;

我们的最终Header.tsx代码应该如下所示：

import * as React from 'react';
import {StyleSheet, Text, View} from 'react-native';

const Header = () => {
  return (
    <View style={styles.headerContainer}>
      <Text style={styles.headerText}>Welcome to Vega!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  headerContainer: {
    padding: 10,
    alignItems: 'center',
    backgroundColor: '#232F3E',
    width: '100%',
  },
  headerText: {
    fontSize: 50,
    fontWeight: '700',
    color: '#FF9900',
  },
});

export default Header;

呈现Header组件

要呈现我们的Header组件，需要将其导入App.tsx。

• 在App.tsx中，修改导入以导入Header组件而不是链接。
• 移除Text、ImageBackground和Image导入。
• 使用样式属性容器在View中渲染Header。
• 修改StyleSheet以仅使用容器样式，这只会为我们的应用提供更好的背景颜色。

我们的App.tsx应该所下所示：

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

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

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

• 现在前往模拟器看看我们的Header是什么样！

由于快速刷新，Header应该会自动显示，但如果没有，您可以“手动”刷新应用。

• 如果您使用的是VegaStudio，请使用Vega扩展程序按下应用名称旁边的播放按钮。
• 如果您使用的是CLI，请在运行Metro服务器的终端中按“r”。

下一步