如何在React Native Android中实现点击按钮开启自动亮度？

要在React Native Android应用里实现点击按钮开启自动亮度的功能，得结合原生Android代码来做——因为RN本身没提供直接控制系统亮度模式的API，具体步骤如下：

1. 配置权限 #

首先在android/app/src/main/AndroidManifest.xml里添加WRITE_SETTINGS权限：

<uses-permission android:name="android.permission.WRITE_SETTINGS" />

注意这个权限比较特殊，只在清单里声明不够，还得让用户手动在系统设置里授权，后面会说怎么处理。

2. 编写原生Android模块 #

在android/app/src/main/java/com/[你的包名]/下创建BrightnessModule.java文件，代码如下：

package com.你的包名;

import android.content.Context;
import android.provider.Settings;
import android.content.Intent;
import android.net.Uri;
import android.os.Build;
import androidx.annotation.NonNull;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Promise;

public class BrightnessModule extends ReactContextBaseJavaModule {
    private static ReactApplicationContext reactContext;

    BrightnessModule(ReactApplicationContext context) {
        super(context);
        reactContext = context;
    }

    @NonNull
    @Override
    public String getName() {
        return "BrightnessModule";
    }

    // 检查是否有WRITE_SETTINGS权限
    @ReactMethod
    public void hasWriteSettingsPermission(Promise promise) {
        boolean hasPermission;
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            hasPermission = Settings.System.canWrite(reactContext);
        } else {
            hasPermission = true;
        }
        promise.resolve(hasPermission);
    }

    // 跳转到设置页面让用户授权
    @ReactMethod
    public void requestWriteSettingsPermission() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            Intent intent = new Intent(Settings.ACTION_MANAGE_WRITE_SETTINGS);
            intent.setData(Uri.parse("package:" + reactContext.getPackageName()));
            intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
            reactContext.startActivity(intent);
        }
    }

    // 开启自动亮度
    @ReactMethod
    public void enableAutoBrightness(Promise promise) {
        try {
            Settings.System.putInt(reactContext.getContentResolver(), Settings.System.SCREEN_BRIGHTNESS_MODE, Settings.System.SCREEN_BRIGHTNESS_MODE_AUTOMATIC);
            promise.resolve(true);
        } catch (SecurityException e) {
            promise.reject("PERMISSION_DENIED", "没有权限修改系统设置", e);
        }
    }

    // 获取当前自动亮度状态
    @ReactMethod
    public void isAutoBrightnessEnabled(Promise promise) {
        try {
            int mode = Settings.System.getInt(reactContext.getContentResolver(), Settings.System.SCREEN_BRIGHTNESS_MODE);
            promise.resolve(mode == Settings.System.SCREEN_BRIGHTNESS_MODE_AUTOMATIC);
        } catch (Settings.SettingNotFoundException e) {
            promise.reject("SETTING_NOT_FOUND", "无法获取亮度模式", e);
        }
    }
}

然后创建BrightnessPackage.java来注册模块：

package com.你的包名;

import androidx.annotation.NonNull;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class BrightnessPackage implements ReactPackage {
    @NonNull
    @Override
    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new BrightnessModule(reactContext));
        return modules;
    }

    @NonNull
    @Override
    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

接着在MainApplication.java里把这个Package添加到列表里：

// 导入BrightnessPackage
import com.你的包名.BrightnessPackage;

@Override
protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // 添加这一行
    packages.add(new BrightnessPackage());
    return packages;
}

3. React Native 端调用 #

在RN组件里，导入NativeModules，然后写按钮逻辑：

import React, { useState, useEffect } from 'react';
import { View, Button, Alert, NativeModules } from 'react-native';

const { BrightnessModule } = NativeModules;

const AutoBrightnessToggle = () => {
    const [isAutoEnabled, setIsAutoEnabled] = useState(false);

    // 检查权限并开启自动亮度
    const handleEnableAutoBrightness = async () => {
        try {
            const hasPermission = await BrightnessModule.hasWriteSettingsPermission();
            if (!hasPermission) {
                Alert.alert('需要权限', '请在设置中允许应用修改系统设置');
                BrightnessModule.requestWriteSettingsPermission();
                return;
            }
            await BrightnessModule.enableAutoBrightness();
            setIsAutoEnabled(true);
            Alert.alert('成功', '自动亮度已开启');
        } catch (error) {
            Alert.alert('失败', error.message || '开启自动亮度出错');
        }
    };

    // 组件挂载时获取当前状态
    useEffect(() => {
        const fetchStatus = async () => {
            try {
                const enabled = await BrightnessModule.isAutoBrightnessEnabled();
                setIsAutoEnabled(enabled);
            } catch (error) {
                console.error('获取亮度状态失败:', error);
            }
        };
        fetchStatus();
    }, []);

    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Button
                title={isAutoEnabled ? '自动亮度已开启' : '开启自动亮度'}
                onPress={handleEnableAutoBrightness}
                disabled={isAutoEnabled}
            />
        </View>
    );
};

export default AutoBrightnessToggle;

注意事项 #

• Android 6.0（API 23）及以上版本需要动态申请WRITE_SETTINGS权限，低于该版本只要清单声明权限即可直接使用。
• 部分定制ROM可能会限制应用修改系统亮度模式，需确保用户在系统设置中授予对应权限。

内容的提问来源于stack exchange，提问作者Mfa Xyz