世博或反应本地:如何修饰整个屏幕或只是一部分，即使应用程序没有活动

Question

我正在寻找一种方法，使用户的屏幕着色一定的阴影，并改变这一色调加班费。(想想F.lux或者夜班，或者任何数量的蓝光减震器)。有什么办法来应对本土化和/或世博？我知道iOS不允许用户在不越狱的情况下这么做，但我相信这至少对安卓来说是可能的。谢谢您抽时间见我。

Answer 1

应用程序范围内的过滤器解决方案(仅限于Android和web，如果您切换到另一个应用程序，该过滤器就会关闭)。

您可以使用我在下面的示例中命名为" 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

系统范围内的亮度变化(但不改变颜色，这是iOS和Android )

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

NB :大多数模拟器和浏览器上的系统亮度不起作用。它只在真正的设备上工作。

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