React Native环境配置是一个繁琐的过程，但是有很多文档和教程可以参考。以下是一个简化的步骤和示例：

1. 安装Node.js和npm：

   • 访问Node.js官网下载安装：Node.js

2. 安装React Native CLI：

   
   
   
   npm install -g react-native-cli

3. 创建新的React Native项目：

   
   
   
   react-native init AwesomeProject

4. 进入项目目录：

   
   
   
   cd AwesomeProject

5. 安装iOS依赖（仅限于Mac电脑操作系统）：

   
   
   
   npm run ios

6. 安装Android依赖：

   • 确保已安装Java Development Kit (JDK) 8或更高版本。
   • 确保已安装Android Studio，并配置好Android SDK。

   
   
   
   npm run android

7. 开启React Native的Metro Bundler服务：

   
   
   
   npx react-native start

8. 在另外一个终端窗口运行应用：

   
   
   
   npx react-native run-android

注意：以上步骤可能会因为网络问题、系统环境差异等原因出现失败情况，如遇到具体错误信息，需根据错误信息具体分析解决。

在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）的亮度图标。你可以根据需要调整最大亮度值，以及颜色和尺寸。