Expo 或 React Native：即使应用程序未处于活动状态，如何对整个屏幕或仅部分屏幕进行着色

Question

我正在寻找一种方法，将用户的屏幕色调设置为特定的色调，并随着时间的推移更改这种色调。(想想F.lux或Night Shift或任何数量的当前可用的蓝色减光器(。React Native和/或Expo有什么办法做到这一点吗？我知道iOS不允许用户在没有越狱的情况下这样做，但我相信这至少对Android来说是可能的？谢谢你抽出时间。

Answer 1

应用程序范围的过滤器解决方案(仅限Android和web，如果切换到其他应用程序，过滤器会关闭(

您可以使用<查看/>React组件，我将其命名为"；过滤器"；在下面的例子中。这在iOS上不起作用，因为我没有找到一种方法让iOS知道所有用户点击都是针对过滤器下面的元素，而不是过滤器本身。

在下面的示例中，您的整个应用程序由<YourApp/>在这个例子中它是一个简单的按钮。

import React, { useState } from "react";
import { View, Button } from "react-native";
export default function () {
let [opacity] = useState(0.8);
const YourApp = () => (
<Button onPress={() => alert("clicked !!")} title="Click me" />
);
return (
<View
name="filterContainer"
style={{
flex: 1,
width: "100%",
height: "100%",
position: "absolute",
alignItems: "center",
justifyContent: "center",
}}
>
<View
name="filter"
style={{
flex: 1,
width: "100%",
height: "100%",
pointerEvents: "none",
position: "absolute",
elevation: 2,
zIndex: 2,
backgroundColor: "green",
opacity: opacity,
}}
></View>
<View
name="appContainer"
style={{
flex: 1,
position: "absolute",
elevation: 1,
zIndex: 1,
}}
>
<YourApp />
</View>
</View>
);
}

Answer 2

全系统亮度变化(但没有色调变化，仅适用于iOS和Android(

如果你使用Expo，你可以使用SYSTEM_BRIGHTNESS(https://docs.expo.io/versions/latest/sdk/permissions/#permissionssystem_brightness)。

注意：大多数模拟器和web浏览器中的系统亮度不起作用。它只适用于真实的设备。

以下是如何将系统亮度设置为10%的示例：

import * as Permissions from "expo-permissions";
import * as Brightness from "expo-brightness";
async function getAndSetSystemBrightnessAsync() {
const { status } = await Permissions.askAsync(Permissions.SYSTEM_BRIGHTNESS);
if (status === "granted") {
// Set system brightness to 10 %
await Brightness.setSystemBrightnessAsync(0.1);
const bright = await Brightness.getSystemBrightnessAsync();
console.log(bright);
} else {
// Web browsers
console.error("System brightness permission not granted");
}
}
useEffect(() => {
// Ask for system brightness permission
getAndSetSystemBrightnessAsync();
}, []);