# Navbar 头部导航

### 介绍 


提供导航功能。

### 安装

```ts
import { NavBar } from '@nutui/nutui-react-native';
```

### 代码示例

### 基本用法

:::demo
```SnackPlayer name=NavBar&dependencies=@nutui/nutui-react-native
import  React from "react";
import { View } from 'react-native';
import { NavBar, Icon, Toast } from '@nutui/nutui-react-native';

const App = () => {
  return ( 
    <>   
      <NavBar
          title="订单详情"
          border
          leftShow
          leftText="返回"
          onClickTitle={(e) => {
            Toast.text('点击标题');
          }}
          onClickBack={(e) => {
            Toast.text('点击返回');
          }}
          onClickRight={(e) => {
            Toast.text('点击分享');
          }}
        >
          <View style={{ marginRight: 10 }}>
            <Icon
              name="https://img10.360buyimg.com/imagetools/jfs/t1/74863/10/19950/1636/63ad6959F35d79b8e/39dfcb7f6833f666.png"
              size="16"
            />
          </View>
        </NavBar>
    </>
  );
};  
export default App;

```
:::

:::demo
```SnackPlayer name=NavBar&dependencies=@nutui/nutui-react-native
import  React from "react";
import { NavBar, Toast } from '@nutui/nutui-react-native';

const App = () => {
  return ( 
    <>   
      <NavBar
          title="浏览记录"
          desc="清空"
          border
          leftShow
          onClickTitle={(e) => {
            Toast.text('点击标题');
          }}
          onClickBack={(e) => {
            Toast.text('点击返回');
          }}
          onClickRight={(e) => {
            Toast.text('点击清空');
          }}
        />
    </>
  );
};  
export default App;

```
:::

:::demo
```SnackPlayer name=NavBar&dependencies=@nutui/nutui-react-native
import  React from "react";
import { View } from 'react-native';
import { NavBar, Icon, Toast } from '@nutui/nutui-react-native';

const App = () => {
  return ( 
    <>   
       <NavBar
          title="购物车"
          desc="编辑"
          border
          leftShow
          titIcon="https://img13.360buyimg.com/imagetools/jfs/t1/170651/33/33394/2798/63ad67fcFb1132817/9410e270ba821752.png"
          onClickTitle={(e) => {
            Toast.text('点击标题');
          }}
          onClickBack={(e) => {
            Toast.text('点击返回');
          }}
          onClickRight={(e) => {
            Toast.text('点击编辑');
          }}
        >
          <View style={{ marginRight: 10 }}>
            <Icon
              name="https://img12.360buyimg.com/imagetools/jfs/t1/180774/34/30834/724/63872cdfE56cfe8da/74fa5644b09cc73b.png"
              size="16"
            />
          </View>
        </NavBar>
    </>
  );
};  
export default App;

```
:::

:::demo
```SnackPlayer name=NavBar&dependencies=@nutui/nutui-react-native
import  React from "react";
import { View } from 'react-native';
import { NavBar, Icon, Toast } from '@nutui/nutui-react-native';

const App = () => {
  return ( 
    <>
      <NavBar
          title="订单详情"
          border
          leftShow
          leftText="返回"
          onClickTitle={(e) => {
            Toast.text('点击标题');
          }}
          onClickBack={(e) => {
            Toast.text('点击返回');
          }}
          onClickRight={(e) => {
            Toast.text('点击分享');
          }}
        >
          <View style={{ marginRight: 10 }}>
            <Icon
              name="https://img10.360buyimg.com/imagetools/jfs/t1/74863/10/19950/1636/63ad6959F35d79b8e/39dfcb7f6833f666.png"
              size="16"
            />
          </View>
        </NavBar>
    </>
  );
};  
export default App;

```
:::


### 自定义导航栏中间内容

:::demo
```SnackPlayer name=NavBar&dependencies=@nutui/nutui-react-native
import  React from "react";
import { View } from 'react-native';
import { NavBar, Icon, Toast } from '@nutui/nutui-react-native';

const App = () => {
  return ( 
    <>   
      <NavBar
          desc="编辑"
          border
          leftShow
          titIcon="https://img14.360buyimg.com/imagetools/jfs/t1/189314/6/30886/2384/63872bdfEbfa7b6c5/a6d8b9d2cdab31be.png"
          onClickTitle={(e) => {
            Toast.text('点击标题');
          }}
          onClickBack={(e) => {
            Toast.text('点击返回');
          }}
          onClickRight={(e) => {
            Toast.text('点击右侧编辑');
          }}
        >
          <View style={{ flexDirection: 'row' }}>
            <Icon
              name="https://img12.360buyimg.com/imagetools/jfs/t1/180774/34/30834/724/63872cdfE56cfe8da/74fa5644b09cc73b.png"
              size="16"
            />
            <Icon
              name="https://img14.360buyimg.com/imagetools/jfs/t1/189314/6/30886/2384/63872bdfEbfa7b6c5/a6d8b9d2cdab31be.png"
              size="16"
            />
            <Icon
              name="https://img12.360buyimg.com/imagetools/jfs/t1/180774/34/30834/724/63872cdfE56cfe8da/74fa5644b09cc73b.png"
              size="16"
            />
          </View>
          <View style={{ marginRight: 10 }}>
            <Icon
              name="https://img12.360buyimg.com/imagetools/jfs/t1/180774/34/30834/724/63872cdfE56cfe8da/74fa5644b09cc73b.png"
              size="16"
            />
          </View>
        </NavBar>
    </>
  );
};  
export default App;

```
:::

### Prop  

| 字段                       | 说明                                                                                           | 类型    | 默认值  |
|--------------------------|------------------------------------------------------------------------------------------------|---------|---------|
| title                    | 标题名称                                                                                       | String  | -       |
| desc                     | 右侧描述                                                                                       | String  | -       |
| leftShow                 | 是否展示左侧箭头                                                                              | Boolean | true   |
| icon`v1.2.1(废弃)`         | 左侧 [图标名称](#/icon) 或图片链接                                                             | String  | -       |
| titIcon                  | 标题带icon                                                         | String  | -       |   
| leftText`v1.2.1`         | 左侧文案                                                         | String  | -       |   
| fixed`v1.2.1`            | 是否固定                                                         | Boolean  | false       |   
| safeAreaInsetTop`v1.2.1` | 是否适配安全区                                                         | Boolean  | false       |   
| border`v1.2.1`           | 是否显示底部边框                                      | Boolean  | false    | 
| placeholder`v1.2.1`      | 固定在顶部时，是否在标签位置生成一个等高的占位元素           | Boolean  | false    |
| zIndex`v1.2.1`           | 导航栏层级           | Number、String  | 10    |
| style`v1.2.1`            | 容器样式           | React.CSSProperties  | {}    |                                        

### Event
| 名称                      | 说明     | 回调参数    |
|-------------------------|----------|-------------|
| onClickTitle            | 点击标题事件 | event:Event |
| onClickClear`v1.2.1(废弃)` | 点击右侧文案事件 | event:Event |
| onClickRight`v1.2.1`    | 点击右侧事件 | event:Event |
| onClickBack`v1.2.1`             | 点击返回事件 | event:Event |
| onClickIcon`v1.2.1`             | 点击标题右侧icon事件 | event:Event |