我正在使用React-Navigation/Native Healeprovider在我的React-Native Expo应用中管理主题。将主题设置为设备默认设置时，我很难通过某种主题切换在应用程序中手动设置主题。该文档没有提供有关如何手动设置主题的任何详细信息。

Question

import { useColorScheme } from "react-native";

import { Colors } from "@/constants/Colors";

export function useThemeColor(
  props: { light?: string; dark?: string },
  colorName: keyof typeof Colors.light & keyof typeof Colors.dark
) {
  const theme = useColorScheme() ?? "light";
  const colorFromProps = props[theme];

  if (colorFromProps) {
    return colorFromProps;
  } else {
    return Colors[theme][colorName];
  }
}

这是我使用的自定义组件：

import { View, type ViewProps } from "react-native";

import { useThemeColor } from "@/hooks/useThemeColor";

export type ThemedViewProps = ViewProps & {
  lightColor?: string;
  darkColor?: string;
};

export function ThemedView({
  style,
  lightColor,
  darkColor,
  ...otherProps
}: ThemedViewProps) {
  const backgroundColor = useThemeColor(
    { light: lightColor, dark: darkColor },
    "background"
  );

  return <View style={[{ backgroundColor }, style]} {...otherProps} />;
}

I查看了此平台上的各种帖子，但找不到实际使用React-Navigation/atnation的theprovider的文章。

import {Appearance} from 'react-native';

黑暗主题

Appearance.setColorScheme('dark');

Answer 1

为Light主题

Appearance.setColorScheme('light');

您可以阅读

反射本地外观