企业官网建设流程全解析

• UI组件
• 移动开发
• 前端

Headers 是 React Native Elements 中用于承载当前屏幕信息与操作入口的导航类组件。本篇指南以 v1.2.0 版本官方文档为骨架，结合当前仓库 packages/base/src/Header 下的源码实现与测试用例，系统讲解 Header 的默认组件、自定义组件、混合布局、子组件优先级、状态栏与线性渐变等全部配置能力，帮助你在一页之内掌握从快速搭建到深度定制导航栏的完整方案。

Header 是什么

Header 是显示与当前屏幕相关的信息和操作的导航组件，通常被用作页面顶部的导航栏，放置标题、返回按钮、菜单按钮或操作按钮。它默认由左侧、居中、右侧三个区域组成，每个区域都可以通过配置对象、自定义 React 组件或子节点三种方式注入内容。

在 React Native Elements 中，Header 位于 packages/base/src/Header/Header.tsx，组件内部通过SafeAreaView（来自react-native-safe-area-context）处理刘海屏等安全区，默认只包裹['left', 'top', 'right']三个方向的安全边（edges属性可覆盖），并通过StatusBar同步状态栏样式。

基础用法：使用默认组件快速搭建

为了快速完成搭建，React Native Elements 为 Header 提供了默认组件：左右按钮使用 RN Elements 的 Icon，标题使用 React Native 的Text。你只需要通过leftComponent、centerComponent、rightComponent三个配置对象传入即可：

<Header leftComponent={{ icon: 'menu', color: '#fff' }} centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }} rightComponent={{ icon: 'home', color: '#fff' }} />

• { icon: 'menu', color: '#fff' }：将左侧区域渲染为名为menu的图标，颜色为白色；
• { text: 'MY TITLE', style: { color: '#fff' } }：将中间区域渲染为文本标题；
• { icon: 'home', color: '#fff' }：将右侧区域渲染为home图标。

这一逻辑在 HeaderChildren.tsx 中实现：配置对象若带有text属性，则通过renderNode(Text, ...)渲染文本（并默认附加numberOfLines: 1）；若带有icon属性，则通过renderNode(Icon, ...)渲染图标。icon 配置还可附带type（图标库类型，如material、antdesign）、onPress等 Icon 全部 props。

真实的工程化示例可见 example/src/components/header.tsx：左侧传入{ icon: 'menu', color: '#fff', onPress: navigation.openDrawer }打开抽屉导航，中间传入带样式的标题文本，右侧传入自定义图标按钮，这正是"默认组件 + 自定义组件"混合使用的典型场景。

标题左对齐：placement 属性

默认情况下中间标题水平居中，但你可以通过placement属性将标题调整到左侧或右侧对齐：

<Header placement="left" leftComponent={{ icon: 'menu', color: '#fff' }} centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }} rightComponent={{ icon: 'home', color: '#fff' }} />

placement的取值为'left' | 'center' | 'right'，默认值为'center'。从源码看（Header.tsx）：

• 当placement === 'center'时，左右容器都使用flex: 1的对称布局；
• 当placement为left或right时，中间容器会额外获得paddingHorizontal（Android 为 16，其他平台为 15），让标题不至于紧贴边缘。

同时子组件容器内的alignItems也会跟随方向变化（flex-start/flex-end/center），见 HeaderChildren.tsx。

自定义组件：通过 props 传入 React 元素

你可以直接向leftComponent/centerComponent/rightComponent传入自定义 React 组件：

<Header leftComponent={<MyCustomLeftComponent />} centerComponent={<MyCustomCenterComponent />} rightComponent={<MyCustomRightComponent />} />

混合使用配置对象与自定义组件

三种区域的内容类型可以自由混搭，配置对象与 React 元素可以并存，传入返回 React Element 的渲染函数同样有效：

<Header leftComponent={<MyCustomLeftComponent />} centerComponent={this.renderCenterComponent()} rightComponent={{ icon: 'home', style: { color: '#fff' } }} />

通过 children 传入自定义组件

另一种方式是把组件直接放在 Header 的 children 中，从左到右依次对应左、中、右三个区域：

<Header> <MyCustomLeftComponent /> <MyCustomCenterComponent /> <MyCustomRightComponent /> </Header>

组件优先级

通过 children 定义的组件优先于通过 props 传入的组件。下面的例子中，leftComponent={{ icon: 'menu' }}会被MyCustomLeftComponent覆盖：

<Header leftComponent={{ icon: 'menu' }}> <MyCustomLeftComponent /> <MyCustomCenterComponent /> <MyCustomRightComponent /> </Header>

这一优先级关系在源码中体现得非常直接：Header.tsx 中左右中三个区域的取值分别为children[0] || leftComponent、children[1] || centerComponent、children[2] || rightComponent，即 children 为空时才会回退到 props 配置。测试 Header.test.tsx 也验证了"通过 children 传入单个/多个 Button 均能正确渲染"的行为。

自定义容器样式：containerStyle 与状态栏

Header 被设计为尽可能可定制，你可以自由组合各类 props。例如同时调整状态栏文字样式、背景色与子区域布局：

<Header statusBarProps={{ barStyle: 'light-content' }} barStyle="light-content" // 或者直接这样写 leftComponent={<MyCustomLeftComponent />} centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }} containerStyle={{ backgroundColor: '#3D6DCC', justifyContent: 'space-around', }} />

关于状态栏需要说明两点：

• barStyle直接设置状态栏文字颜色，取值为'default' | 'light-content' | 'dark-content'，默认'default'；
• statusBarProps接受 React NativeStatusBar的全部 props（如hidden、translucent、backgroundColor等）。

从源码看（Header.tsx），只要未设置hideStatusBar，Header 就会渲染一个StatusBar，其translucent固定为true，backgroundColor默认取backgroundColorprop 或主题色theme.colors.primary，随后通过{...statusBarProps}展开覆盖，因此statusBarProps拥有最终优先级。测试用例 Header.test.tsx 验证了statusBarProps={{ hidden: true }}能正确透传到StatusBar。

此外，Header 还内置了阴影样式：设置elevated属性即可启用（shadowOpacity: 0.6、elevation: 24等，见 Header.tsx），测试中通过断言elevation === 24验证（Header.test.tsx）。

Props 全量参考

containerStyle

主容器（外层容器）的样式。

backgroundColor

设置父容器的背景颜色。

backgroundImage

设置父容器的背景图片。

backgroundImageStyle

主容器中背景图片的样式。

leftComponent

定义左侧组件，支持三种形式：文本配置对象、图标配置对象、React 元素/组件。

centerComponent

定义中间组件，类型同leftComponent。

rightComponent

定义右侧组件，类型同leftComponent。

leftContainerStyle

左侧组件外层容器的样式。

centerContainerStyle

中间组件外层容器的样式。

rightContainerStyle

右侧组件外层容器的样式。

placement

标题的对齐方式。

barStyle

设置状态栏文字的颜色。

statusBarProps

接受 React NativeStatusBar的全部 props。

ViewComponent

容器所使用的组件。

linearGradientProps

显示线性渐变，见下方"LinearGradient 用法"。注意该属性必须配合ViewComponent使用。

从源码确认，ViewComponent的默认取值逻辑为：只要传入linearGradientProps或backgroundImage，容器就自动切换为ImageBackground（Header.tsx），背景图与渐变配置都会通过{...linearGradientProps}展开到容器上。类型定义HeaderProps中还额外提供了hideStatusBar、elevated、edges等属性（Header.tsx），使用主题版本时可通过 packages/themed/src/Header/index.tsx 引入带withTheme包裹的版本。

LinearGradient 用法

React Native Elements 通过 react-native-linear-gradient 包支持线性渐变。如果使用 Expo 或 create-react-native-app，开箱即可使用linearGradientProps，无需额外配置。

对于使用react-native-cli的用户，请先按该库的安装说明完成原生依赖的链接，然后这样使用：

import { Header } from 'react-native-elements'; import LinearGradient from 'react-native-linear-gradient'; // ... <Header ViewComponent={LinearGradient} // 千万别忘了这一行！ linearGradientProps={{ colors: ['red', 'pink'], start: { x: 0, y: 0.5 }, end: { x: 1, y: 0.5 }, }} />

其中：

• ViewComponent={LinearGradient}：将底层容器替换为渐变组件，这是启用渐变的关键步骤；
• colors: ['red', 'pink']：渐变的起止颜色数组；
• start/end：分别用{ x, y }坐标（取值 0～1）控制渐变方向，上例为从左到右的水平渐变。

如果忘记传入ViewComponent而只传了linearGradientProps，源码会在渲染时通过useEffect打印警告提示（Header.tsx），提醒你补上ViewComponent。

在主题体系中使用 Header

在当前的 monorepo 结构中，Header 同时提供基础版与主题版两种入口：

• 基础版：@rneui/base，源码位于 packages/base/src/Header；
• 主题版：@rneui/themed，通过 packages/themed/src/Header/index.tsx 用withTheme(Header, 'Header')包裹后导出，支持配合ThemeProvider使用主题颜色（Header 默认背景色即取自theme.colors.primary）。

从 packages/base/src/Header/tests/Header.test.tsx 的测试用例可以看到，Header 的每种接入方式都有对应的行为验证：children 传入、props 传入配置对象、props 传入组件、backgroundColor、containerStyle、elevated、statusBarProps、backgroundImage与backgroundImageStyle等均有覆盖，可作为自定义扩展时的行为契约参考。

小结

Header 组件以"左、中、右"三段式布局为骨架，通过三种内容注入方式（配置对象、React 元素、children）与一整套样式/状态栏/背景 props，覆盖了从快速搭建到高度定制的全部需求。实践中建议：简单场景直接用{ icon }/{ text }配置对象；需要复杂交互时传入自定义组件；注意 children 优先级高于 props；需要渐变背景时务必同时传入ViewComponent={LinearGradient}与linearGradientProps。更多进阶用法可继续阅读仓库内的 Header 源码、示例工程 header.tsx 与 icon 组件文档。

• UI组件
• 移动开发
• 前端