跳到主要内容

useNavigationBar

操作导航条: Loading 动画、title 或 Color 以及 HomeButton

何时使用​

当需要对导航栏客制化时

API​

const { setTitle, hideButton, toggleLoading, setColor } =
  useNavigationBar(initialOption);

参数说明​

initialOption: NavigationBarOption​

若设置初始参数, 会自动解析来执行对应的操作

参数说明类型默认值
NavigationBarOption导航栏配置Partial<SetNavigationBarColorOption & SetNavigationBarTitleOption & ToggleNavigationBarLoadingOption & ToggleHomeButtonOption>-

SetNavigationBarColorOption​

设置导航条颜色参数

参数说明类型默认值
backgroundColor背景颜色值，有效值为十六进制颜色string-
frontColor前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000string-
animation动画效果Animation-

SetNavigationBarTitleOption​

设置导航条标题参数

参数说明类型默认值
title页面标题string-

ToggleNavigationBarLoadingOption​

设置导航条加载状态参数

参数说明类型默认值
loading是否加载boolean-

ToggleHomeButtonOption​

设置隐藏首页按钮状态参数

参数说明类型默认值
hideButton是否隐藏首页按钮boolean-

返回值说明​

返回值说明类型
toggleLoading设置导航栏 loading 动画状态PromiseOptionalAction<boolean>
setTitle设置导航栏标题PromiseOptionalAction<string>
setColor设置导航条颜色PromiseOptionalAction<SetNavigationBarColorOption>
hideButton隐藏返回首页按钮PromiseWithoutOptionAction

代码演示​

feedback/useNavigationBar/index
import React from 'react';
import { useNavigationBar } from 'taro-hooks';
import Mock from 'mockjs';
import DemoContent from '@src/components/DemoContent';
import { Button } from '@taroify/core';

export default () => {
  const { setTitle, hideButton, toggleLoading, setColor } = useNavigationBar({
    title: 'Taro-Hooks',
  });

  const handleSetTitle = () => {
    setTitle(Mock.Random.name());
  };

  const handleSetColor = () => {
    setColor({
      backgroundColor: Mock.Random.color(),
      frontColor: '#ffffff',
    });
  };

  return (
    <DemoContent>
      <Button
        block
        color="primary"
        className="gap"
        onClick={() => toggleLoading()}
        shape="square"
      >
        切换导航栏Loading状态
      </Button>
      <Button
        block
        color="primary"
        className="gap"
        onClick={handleSetTitle}
        shape="square"
      >
        设置导航栏标题
      </Button>
      <Button
        block
        color="primary"
        className="gap"
        onClick={handleSetColor}
        shape="square"
      >
        设置导航栏颜色
      </Button>
      <Button block color="primary" onClick={() => hideButton()} shape="square">
        隐藏返回首页按钮
      </Button>
    </DemoContent>
  );
};

Hook 支持度​

微信小程序H5ReactNative
✔️✔️