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

Question

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

Answer 1

App-wide 过滤解决方案（Android 和仅网络，如果您切换到其他应用程序，过滤器将关闭）

您可以使用我在下面的示例中命名为“filter”的 React 组件制作过滤器。这在 iOS 上不起作用，因为我没有找到一种方法让 iOS 知道所有用户点击都是针对过滤器下方的元素，而不是过滤器本身。

在下面的示例中，您的整个应用程序由表示，在此示例中它是一个简单的按钮。

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

System-wide 亮度变化（但没有色调变化，这只是 iOS 和 Android）

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

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

这里是一个如何将系统亮度设置为 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();
}, []);

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

Expo or React Native: How to tint the entire screen or just a portion even if app isn't active

android

tint

react-native

expo