useBrightness

屏幕亮度

何时使用

当需要获取或设置屏幕亮度

API

const [brightness, setBrightness] = useBrightness(keepon?: boolean);

参数说明

参数	说明	类型	默认值
keepon	是否常亮	boolean	-

返回值说明

返回值	说明	类型
brightness	屏幕亮度值，范围 0 ~ 1，0 最暗，1 最亮	number
setBrightness	设置屏幕亮度值(0~1)	(value) => Promise<General.CallbackResult>

代码演示

React

device/useBrightness/index

import React from 'react';
import { useBrightness } from 'taro-hooks';

import DemoContent from '@src/components/DemoContent';
import { Cell, Progress, Slider } from '@taroify/core';

export default () => {
  const [brightness, setBrightness] = useBrightness();

  return (
    <DemoContent>
      <Cell.Group clickable>
        <Cell
          title="当前亮度"
          brief={<Progress percent={(brightness || 0) * 100} />}
        >
          {brightness}
        </Cell>
        <Cell
          title="设置亮度"
          brief={
            <Slider
              min={0}
              max={1}
              step={0.1}
              defaultValue={brightness || 0}
              onChange={setBrightness}
            />
          }
        ></Cell>
      </Cell.Group>
    </DemoContent>
  );
};

Vue

device/useBrightness/index

<template>
  <demo-content>
    <nut-cell-group>
      <nut-cell title="当前亮度">
        <nut-progress :percentage="(brightness || 0) * 100" />
      </nut-cell>
      <nut-cell title="设置亮度">
        <nut-range
          :min="0"
          :max="1"
          :step="0.1"
          v-model="rangeBrightness"
          @change="setBrightness($event)"
        ></nut-range>
      </nut-cell>
    </nut-cell-group>
  </demo-content>
</template>

<script setup lang="ts">
import { useBrightness } from 'taro-hooks';
import { useState } from '@taro-hooks/core';

const [rangeBrightness] = useState<string>();

const [brightness, setBrightness] = useBrightness();
</script>

Hook 支持度

微信小程序	H5	ReactNative
✔️		✔️