navigation 导航栏

导航栏组件是一个常见的用户界面元素，用于在网页或应用程序中提供导航链接和菜单选项，帮助用户快速浏览和访问不同的页面或功能。

Props参数

名称	类型	是否必传	默认值	描述
title	string	否	-	中间显示的标题
renderLeft	ReactNode	否	-	渲染左边的元素
type	MMNavigationType | keyof typeof MMNavigationType	否	-	类型
place	boolean	否	true	是否占据高度
shadow	boolean	否	true	是否显示导航阴影
默认情况下导航组件在下面会有一个box-shadow阴影。有时候你需要关掉它
contentClass	any	否	-	导航条样式
contentStyle	CSSProperties	否	-	导航条样式
beforeNavBack	() => Promise<boolean> | boolean	否	-	点击返回之前处理函数 你可以通过此函数在返回之前做拦截处理操作。 支持返回一个者异步函数 。结果为true时可以返回。为false时阻止返回

示例

import { View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState } from 'react'
import Navigation from '~/components/navigation/index'
import MMButton from '~/components/button'
import styles from './index.module.less'
import MMIconFont from '~/components/icon-font'
import MMIconFontName from '~/components/icon-font/const'

export default () => {
  const [number, setNumber] = useState(0)

  function onClick() {
    setNumber((pre) => (pre + 1) % 4)
  }

  return (
    <View>
      {number === 0 && <Navigation title="普通导航普通导航普通导航普通导航普通导航普通导航普通导航普通导航普通导航普通导航普通导航普通导航普通导航普通导航" />}

      {number === 1 && (
        <Navigation
          title="透明的导航"
          type="Transparent"
          renderLeft={
            <View className={styles.back} onClick={() => Taro.navigateBack()}>
              <MMIconFont value={MMIconFontName.Back} style={{ fontSize: 13, fontWeight: 'bold' }} />
            </View>
          }
        />
      )}

      {number === 2 && <Navigation type="Primary" title="主色导航" />}

      {number === 3 && <Navigation title="自定义导航" contentStyle={{ backgroundColor: 'red' }} />}

      <MMButton onClick={onClick} text="导航切换" />
    </View>
  )
}