---
title: WKCustomNavigationBar 自定义头部
group:
  title: 展示组件
  path: /show/
---

## 何时使用

- 需要自定义导航栏的情况 mode='static'
- 导航栏一开始透明随着页面上拉逐渐显示的情况 mode='auto'
- 无导航栏的情况 mode='none'

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKCustomNavigationBar, WKImage } from '@wakeapp/components';
import wkCustomTitle from './wk-custom-title.png';
export default () => {
  return (
    <PageWrapper>
      <WKCustomNavigationBar mode="static" title="标题" frontColor="black"></WKCustomNavigationBar>
      <WKImage src={wkCustomTitle} mode="scale" width="100%" heightAuto></WKImage>
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKCustomNavigationBar/index.d.ts'></API>
