@hd-design/navbar

好多素教特色的导航栏，由 native 支持，并提供降级方案

https://haoduo.yuque.com/jswd/uizxkx/kyslvi

• [x] Native
• [x] Web
  • [ ] 标题长度超出省略处理
• [x] Taro

安装

  npm install --save @hd-design/navbar

使用

配置参数

src/interface.ts

/**
 * 基础配置
 * 所有涉及颜色都支持 rgb、rgba、hex、argb(#ff000000)
 */
export interface BasicOptionConfig {
  // 标题, 默认取 <title></title>
  title?: string;
  // 标题、图标颜色，默认 #111111，支持ARGB
  color?: string;
  // 导航栏背景颜色, 默认 #ffffff，支持ARGB
  bgColor?: string;
  // 底部边框颜色，默认透明，支持ARGB
  bottomBorderColor?: string;
  // 状态栏颜色，默认 dark
  statusBarColor?: "white" | "dark";
  // 状态栏背景色，支持ARGB
  statusBarBgColor?: string;
  // 导航栏主题，默认 white，优先级最低，任何其他配置都会更改对应配置
  // white: 背景白色(#ffffff)，图标、标题、状态栏、底部边框黑色(#111111)
  // dark: 背景黑色(#111111)，图标、标题、状态栏、底部边框白色(#ffffff)
  themeMode?: "white" | "dark";
  // 占位，一共三种状态，默认 FULL
  // full - 全占位，即占据容器整个导航栏空间，包括导航头和状态栏
  // status_bar - 状态栏占位，即只有状态栏占据空间
  // empty - 都不占位，即整个导航栏悬浮在容器顶部
  placeholder?: 'full' | 'status_bar' | 'empty';
  // 只留左侧返回按钮，默认 false，此选项仅native生效
  onlyBackIcon?: boolean;
  // 是否需要关闭按钮
  // 公司的网站默认是 false，
  // 加载第三方网站时默认是 true
  // 需要提供类似白名单功能来控制展示
  // 现有公司一级域名：
  // 1. haoduo.vip
  // 2. haoduojiaoyu.com
  needClose?: boolean;
}

/**
 * 配置完整的导航栏功能
 */
export interface NavbarProps extends BasicOptionConfig {
  // 左侧返回图标，支持网络图片和base64图片，默认 <
  backIcon?: string;
  // 左侧返回文案, 与 backIcon 互斥，优先级大于backIcon
  backTitle?: string;
  // 隐藏返回按钮
  hideBack?: boolean;
  // 设置右侧按钮, 展示顺序从左到右
  optionMenu?: OptionMenu;
  // 标题单击，单击与双击同时只能设置一种
  onTitleClick?(): any;
  // 标题双击，单击与双击同时只能设置一种
  // 注：自定义web导航栏在移动设备双击并不会生效，待讨论
  onTitleDoubleClick?(): void;
  // 返回点击,有则不默认返回，交由页面处理
  // 默认会阻止物理返回，可以通过 he.needBackPress 更改
  onBackClick?(): any;
}

// 右侧菜单
export interface OptionMenu {
  menus: Array<OptionMenuItem>;
}

// 菜单子项
export interface OptionMenuItem {
  // 右侧按钮的类型，默认 normal
  // normal - 普通的图标、文本、或者混合按钮
  // more - 展开更多
  type?: "normal" | "more";
  // 图标，支持网络图片和base64，type = more 时不生效
  icon?: string;
  // 文本，type = more 时不生效
  text?: string;
  // 颜色
  color?: string;
  // 徽记，小红点
  // 如果是 '0',展示小红点
  // 如果是 number > 0，显示小红点并展示数字，最大显示 99+?
  badge?: 0 | number;
  // 子菜单，只给 type = more 用
  children?: Array<OptionMenuItem>;

  // 按钮点击
  onClick?(): void;
}

// url接收参数
// https?://xxx.haoduo.vip/xxx/xxx?__navbar_options__=encodeURIComponent(JSON.stringify(options))
// 给 URL 传参用的可用的options:
export interface UrlOption extends BasicOptionConfig {
  // 是否需要隐藏navbar，默认false
  hide?: boolean;
}

Api使用

import navbar from "@hd-design/navbar";

navbar.setNavbar(config)

• setNavbar(config: NavbarProps): 更改导航栏整体样式与行为
• hideNavbar(): 隐藏导航栏
• showNavbar(config?: NavbarProps): 显示导航栏
• changeNavbarTheme(theme: NavbarProps["themeMode"]): 切换导航栏主题，提供黑白两种主题
• hideNavbarOptionMenu(): 隐藏右侧 option menu
• showNavbarOptionMenu(optionMenu: NavbarProps["optionMenu"]): 显示右侧 option menu
• resetNavbar(config?: NavbarProps): 重置导航栏
• destory(): 清除导航栏产生的副作用，一般不需要主动调用，慎用

React组件使用

export interface ReactNavbarProps extends NavbarProps {
  // 是否自定义导航头，无 native 导航头
  custom?: boolean;
  // 是否同时展示自定义导航头和 native 导航头
  keepCustom?: boolean;

  // 自定义导航头支持, 各种合法颜色, 各种合法节点
  // web、Taro共同生效属性
  // 替换标题
  children?: React.ReactNode;
  // 导航栏颜色变化时是否不需要动画效果，默认 false
  colorWidthoutTransition?: boolean;
  // 不需要状态栏高度,默认 false
  noStatusBar?: boolean;
  // 修改导航栏类名
  className?: string;
  // 修改导航栏整体样式
  style?: React.CSSProperties;
  // 左侧返回节点
  backReactNode?: React.ReactNode;
  // 左侧额外渲染
  leftExtraRender?(): React.ReactNode;
  // 右侧额外渲染
  rightExtraRedner?(): React.ReactNode;

  // 以下仅web、native支持
  // 设置右侧按钮, 展示顺序从左到右
  optionMenu?: {
    menus: Array<
      OptionMenuItem & {
        // 支持自定义渲染，仅 自定义组件支持
        render?(menu: OptionMenuItem): any;
      }
    >;
  };
  // 隐藏右侧菜单，默认false
  hideOptionMenu?: boolean;
}

DOM环境使用

import Navbar from "@hd-design/navbar/lib/react"
import "@hd-design/navbar/lib/react/dom/index.css"

export default () => {
  return <Page>
    <Navbar title="标题" />
  </Page>
}

Taro框架使用

import Navbar from "@hd-design/navbar/lib/react/taro"
import "@hd-design/navbar/lib/react/taro/index.css"

export default () => {
  return <Page>
    <Navbar title="标题" />
  </Page>
}