反应本地世博会。Android暗模式问题

Question

当我改变我的移动主题从光到黑暗，这是影响我的反应本地应用程序的背景色。我只想让它永远保持白色，但当我把我的移动主题从光变黑时，它就会变白变黑。我已经找到了一个解决方案，可以在没有世博的情况下做出反应：响应本机android暗模式问题，但是我不能使用它，因为我没有Android文件夹。

Answer 1

直到今天，我还面临着同样的问题。在阅读了许多文件之后，我发现：

https://docs.expo.dev/guides/color-schemes/

在您的app.json文件中：

{
  "expo": {
    "userInterfaceStyle": "light",
    "ios": {
      "userInterfaceStyle": "light"
    },
    "android": {
      "userInterfaceStyle": "light"
    }
  }
}

在此之后，不要忘记安装expo-system-ui。要检查是否一切正常，可以为SKD 45+运行expo config --type introspect或npx expo config --type introspect。

但这并不能解决小米设备的问题。要解决此设备的问题，我们需要一个加号配置，如下所示：

• 在根目录(与app.json相同的目录)中创建一个名为plugin的文件夹；
• 添加一个名为withDisableForcedDarkModeAndroid.js的文件
• 在这个新文件中添加以下代码：

const {
    createRunOncePlugin,
    withAndroidStyles,
    AndroidConfig
} = require('@expo/config-plugins');

function setForceDarkModeToFalse(styles) {
    styles = AndroidConfig.Styles.assignStylesValue(styles, {
        add: true,
        parent: AndroidConfig.Styles.getAppThemeLightNoActionBarGroup(),
        name: `android:forceDarkAllowed`,
        value: "false",
    });

    return styles;
}

const withDisableForcedDarkModeAndroid = (config) => {
    return withAndroidStyles(config, (config) => {
        config.modResults = setForceDarkModeToFalse(config.modResults);
        return config;
    });
};

module.exports = createRunOncePlugin(withDisableForcedDarkModeAndroid, 'disable-forced-dark-mode', '1.0.0');

在此之后，在app.json文件中添加新插件，在expo.config.plugin下面

{
  "expo": {
      [...]
    "userInterfaceStyle": "light",
    "ios": {
      [...]
      "userInterfaceStyle": "light",
    },
    "android": {
      [...]
      "userInterfaceStyle": "light",
    },
    "plugins": [
      [
        "./plugins/withDisableForcedDarkModeAndroid.js",
        {}
      ]
    ]
  }
}

就这样!在这里工作过:我在这里找到了这个代码吗：https://gist.github.com/hirbod/d6bb5d0fc946a12ba9e3cf01120c604a

提前为作者准备！

PS.1：userInterfaceStyle -可用的选项是:自动(跟踪系统外观设置并通知用户所做的任何更改)、光照(限制应用程序仅支持光主题)和暗(限制应用程序仅支持暗主题)。

PS.2:小米设备的这种特殊配置是必要的，因为这些设备具有android:forceDarkAllowed=true配置。此配置并不是仅通过添加世博会团队提议的配置来覆盖的。

Answer 2

在"userInterfaceStyle" : "light" / app.json / app.config.js中添加

轻型(限制应用程序只支持轻型主题)

如果没有此键，应用程序将默认为轻型样式。

示例app.json配置：

{
  "expo": {
    "userInterfaceStyle": "automatic",
    "ios": {
      "userInterfaceStyle": "dark"
    },
    "android": {
      "userInterfaceStyle": "light"
    }
  }
}

世博参考链接

或使用外观

• 世博安装反应-本机外观

例子-

import React from 'react';
import { Text, SafeAreaView, StatusBar, StyleSheet } from 'react-native';
import { AppearanceProvider, useColorScheme } from 'react-native-appearance';

export default function AppContainer() {
  return (
    <AppearanceProvider>
      <App />
    </AppearanceProvider>
  );
}

function App() {
  const colorScheme = useColorScheme();

  const themeStatusBarStyle = colorScheme === 'light' ? 'dark-content' : 'light-content';
  const themeTextStyle = colorScheme === 'light' ? styles.lightThemeText : styles.darkThemeText;
  const themeContainerStyle =
    colorScheme === 'light' ? styles.lightContainer : styles.darkContainer;

  return (
    <SafeAreaView style={[styles.container, themeContainerStyle]}>
      <StatusBar barStyle={themeStatusBarStyle} />
      <Text style={[styles.text, themeTextStyle]}>Color scheme: {colorScheme}</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  lightContainer: {
    backgroundColor: '#D0D0C0',
  },
  darkContainer: {
    backgroundColor: '#242C40',
  },
  lightThemeText: {
    color: '#242C40',
  },
  darkThemeText: {
    color: '#D0D0C0',
  },
});