react native使用画布，根据亮度值的百分比画出亮度图标

在React Native中，你可以使用react-native-canvas库来绘制亮度图标。首先，确保你已经安装了react-native-canvas：

npm install react-native-canvas

然后，你可以创建一个自定义组件来绘制亮度图标。以下是一个简单的例子：

import React from 'react';
import { Canvas, useCanvas } from 'react-native-canvas';
 
const BrightnessIcon = ({ brightness }) => {
  const canvasRef = React.useRef(null);
 
  const drawBrightness = () => {
    const canvas = canvasRef.current;
    const ctx = useCanvas(canvas);
 
    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
 
    // 绘制亮度图形
    const width = canvas.width;
    const height = canvas.height;
    const brightnessPercentage = brightness / 255; // 假设最大亮度为255
 
    ctx.fillStyle = '#000'; // 亮度图标的填充颜色
    ctx.fillRect(0, 0, width * brightnessPercentage, height); // 根据亮度值绘制矩形
  };
 
  return (
    <Canvas ref={canvasRef} onLayout={drawBrightness} style={{ width: 50, height: 20 }} />
  );
};
 
export default BrightnessIcon;

在这个例子中，BrightnessIcon组件接收一个brightness属性，表示亮度值。然后，它使用Canvas和useCanvas来绘制一个表示亮度的图标。绘制时，它会计算亮度值对应的百分比，并使用该值来确定矩形的宽度。

要使用这个组件，你可以这样做：

<BrightnessIcon brightness={120} />

这将会绘制一个表示亮度为120（假设最大亮度为255）的亮度图标。你可以根据需要调整最大亮度值，以及颜色和尺寸。