Expo или React Native: как подкрасить весь экран или только его часть, даже если приложение неактивно

Я ищу способ подкрасить экран пользователя в определенный оттенок и изменить этот оттенок сверхурочно. (Вспомните F.lux или Night Shift или любое количество доступных в настоящее время поглотителей синего света). Есть ли способ сделать это с помощью React Native и/или Expo? Я знаю, что iOS не позволяет пользователям делать это без джейлбрейка, но я полагаю, что это возможно, по крайней мере, для Android? Спасибо за ваше время.


react-native android expo tint
person Peter    schedule 02.10.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Решение фильтра для всего приложения (только для Android и Интернета, и фильтр отключается, если вы переключаетесь на другое приложение)

Вы можете создать фильтр с компонентом ‹View/›React, который я назвал filter в приведенном ниже примере. Это не работает на 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>
  );
}
person Etienne Tonnelier    schedule 03.10.2020
comment
Спасибо за ваш ответ! Я больше склоняюсь к тому, что тонирует весь экран, и он остается тонированным даже после того, как вы выходите из приложения! Так что своего рода постоянное наложение, которое позволяет нормально взаимодействовать с приложениями под ним, если это имеет смысл. Этот пример, который вы продемонстрировали, прекрасен, но я не думаю, что зеленый цвет все еще будет присутствовать, если вы переключитесь на другое приложение, верно? Спасибо, Этьен! - person Peter; 03.10.2020
comment
де нада :) Да, зеленый экран исчезает, как только вы закрываете приложение (и на iOS это не работает). Некоторые приложения на Android используют разрешение SYSTEM_ALERT_WINDOW. Вам, вероятно, придется выйти из Expo и использовать нативный мост, чтобы использовать android.view.WindowManager. Я попробую POC в ближайшие несколько недель. Хороший пример Android-приложения поверх других приложений доступен по адресу github.com/noln. /system-alert-window-example В iOS это кажется невозможным: stackoverflow.com/questions/39473722/ - person Etienne Tonnelier; 04.10.2020

arrow_upward
1
arrow_downward

Изменение яркости в масштабе всей системы (но без изменения оттенка, и это только для 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();
}, []);
person Etienne Tonnelier    schedule 04.10.2020