有什么方法可以在 React Native for iOS 中实现真正的暗模式？答案

【问题标题】：Is there any method to achieve true Dark Mode in React Native for iOS?有什么方法可以在 React Native for iOS 中实现真正的暗模式？
【发布时间】：2020-06-25 06:37:36
【问题描述】：

在 iOS 中切换深色模式时，我们可以看到应用切换器中的应用预览会立即改变其外观即使在后台暂停。

这篇文章旨在了解是否有可能在 React Native 中实现这一点（无论使用裸 React Native 还是 Expo），如果没有，我们是否可以帮助实现它？

观察动画：

如果没有显示，请点击here。

本机设置应用程序即使在后台暂停，但在切换暗模式时会改变其外观
Expo 客户端应用程序也在后台暂停（应用程序切换器是从主页打开的，而不是在使用 Expo 时）在切换暗模式时不会改变其外观。只有当我点击返回应用程序时才会这样做
我不确定 Expo 客户端是否使用 React Native 构建，因为“2”中描述的行为。并不总是发生。但我尝试使用 react-native-appearance 创建自己的 RN 应用程序，暂停时颜色不会改变（如动画所示）

目前，有一种 hacky 方式可以部分实现这一点，但我认为没有人能忍受用它来发布他们的应用程序。

<View style={{
    backgroundColor: isDarkModeOn ? 'black' : 'white', // remove this
}} />

根本不指定backgroundColor，即使在暂停并从应用切换器查看时，它的行为也会像原生应用一样，可能是因为它默认使用原生值......但是：

仅适用于backgroundColor
且仅当它是 <View/>（或等效名称）时
并且仅限于黑白

只要不满足上述条件之一，我们仍然需要依赖 JavaScript。

我想相信有一个我不知道的解决方案。但到目前为止，我发现的所有黑暗模式教程都没有提到这个问题。

【问题讨论】：

您的动画链接指向一个私人 gif！我们不能看！
@FotisTsakiris 该链接只是一个额外的链接，以防嵌入式链接不显示，顺便说一下，我已将其设置为公开。
GR8！我多希望我能帮忙。你为什么不给 William Candilon wcandillon@gmail.com 发一封电子邮件。他还以他的 YouTube 系列“Can it be done in React Native”而闻名。我相信他能帮上忙！

标签： react-native react-native-ios ios-darkmode

【解决方案1】：

这绝对可以做到，代码如下：

import { DynamicColorIOS } from 'react-native';
export const C = {
  normalText:   DynamicColorIOS({ dark: '#999', light: '#222'}),
  normalTextBold: DynamicColorIOS({ dark: '#ccc', light: '#000'}),
  titleText:    DynamicColorIOS({ dark: '#777', light: '#999'}),
  headingText:  DynamicColorIOS({ dark: '#999', light: '#666'}),
  borderLine:   DynamicColorIOS({ dark: '#888', light: '#888'}),
  background:   DynamicColorIOS({ dark: '#000', light: '#fff'}),
  internalLink: DynamicColorIOS({ dark: '#1EAEDB', light: '#01a'}),
};

我不知道这会如何影响 Android 兼容性，但是如果您更改所有样式表以使用这些配对颜色（样式属性右侧的 C.background），您将获得正确的光照模式和正如您所描述的，系统会更改暗模式颜色并设置动画。您甚至可以在 iOS 模拟器中使用 Cmd+Shift+A 来更改外观，如果您再次按下它，它将从浅色模式变为深色模式并返回。

【讨论】：