使用 react-native Appearance 控制应用颜色主题我很困惑

编程问答 2022-05-30

问题描述

我需要为（非 Expo）React Native 应用程序的用户提供选项：使用的颜色主题。最终，用户应该有关于主题的三个选项，“浅色模式、深色模式、使用系统”。我首先专注于遵循手机的系统设置。

请注意，我们不想使用 react-native-paper，因为我们不需要仅仅为了使主题工作而产生的开销。

React Native Appearance 似乎就是我所需要的，但我对 example code 感到困惑。

我对 React 和 React Native 比较陌生，所以我可能会遗漏一些东西。

我们有两个主题，USLight 和 USDark：

// USTheme.tsx
import * as React from 'react';
import {Appearance} from 'react-native';
import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheet';

export type USTheme = {
  Color01: ColorValue;
  Color02: ColorValue;
};

export const USLight = {
  Color01: '#000000ff',Color02: '#ffffffff',};

export const USDark = {
  Color01: '#ffffffff',Color02: '#000000ff',};

export const themes = {light: USLight,dark: USDark};
export const USThemeContext: React.Context<USTheme> = React.createContext(
  Appearance.getColorScheme() === 'dark' ? themes.dark : themes.light,);

这一切看起来都很简单。但是，外观示例正在扩展 React.Component，这似乎使事情变得复杂。

我的目标是包装应用程序，以便我们可以在标记中使用 theme.color01 之类的颜色，并根据用户系统设置自动更改主题（以及基于时间的从亮到暗的切换，然后回来）。看起来示例中的 ThemedContainer 正是我需要的，但我不确定。

我已经尝试使用该示例作为指导，但还没有找到可行的解决方案（或任何 VSCode 不会在示例代码中引发数十个错误的解决方案。）

那么，我的问题：

  • 我是否需要扩展 React.Component 才能使其工作？
  • 我可以只在 *ChangeListener 中添加 App.tsx 吗？
  • 有人见过使用 React Native Appearance 的简单示例吗？我没有找到。

感谢您提供的任何帮助。

如果我弄明白了，我会写一个 HOW-TO 并张贴在某个地方。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

appearancereact-nativethemes