跳到主要内容

useBackground

动态设置窗口

何时使用

当需要对窗口背景色和字体设置时

API

const [setBackgroundColor, setBackgroundTextColor] = useBackground(option?);

参数说明

参数说明类型默认值
backgroundColor窗口的背景色,必须为十六进制颜色值string-
backgroundColorTop顶部窗口的背景色,必须为十六进制颜色值,仅 iOS 支持string-
backgroundColorBottom底部窗口的背景色,必须为十六进制颜色值,仅 iOS 支持string-
textStyle下拉背景字体、loading 图的样式TTextStyle-

TextStyle

参数类型说明
darkdarkdark 样式
lightlightlight 样式

返回值说明

参数类型说明
setBackgroundColor(setOption?: BackgroundColorOption) => Promise<General.CallbackResult>动态设置下拉背景字体、loading 图的样式 ( RN仅iOS )
setBackgroundTextColor(textStyle: TextStyle) => Promise<General.CallbackResult>动态设置窗口的背景色( RN仅Android )

BackgroundColorOption

参数说明类型默认值
backgroundColor窗口的背景色,必须为十六进制颜色值string-
backgroundColorTop顶部窗口的背景色,必须为十六进制颜色值,仅 iOS 支持string-
backgroundColorBottom底部窗口的背景色,必须为十六进制颜色值,仅 iOS 支持string-

代码演示

layout/useManualPullDownRefresh/index
import React from 'react';
import { useManualPullDownRefresh, useBackground } from 'taro-hooks';
import Mock from 'mockjs';
import DemoContent from '@src/components/DemoContent';
import { Button } from '@taroify/core';

export default () => {
const [start, stop] = useManualPullDownRefresh();
useBackground({ textStyle: 'dark', backgroundColor: Mock.Random.color() });

return (
<DemoContent>
<Button
block
color="primary"
className="gap"
onClick={() => start()}
shape="square"
>
开始下拉刷新
</Button>
<Button
block
color="primary"
className="gap"
onClick={stop}
shape="square"
>
结束下拉刷新
</Button>
<Button
block
color="primary"
className="gap"
onClick={() => start(2000)}
shape="square"
>
开始下拉刷新2S后停止
</Button>
</DemoContent>
);
};

Hook 支持度

微信小程序H5ReactNative
✔️✔️