如何在 React Native WebView 上启用暗模式？

Question

React Native webview 中的一个问题是“在 iOS 上，如果系统外观设置为深色，WebView 会自动使用深色主题。在 Android 上，这种情况不会发生。”还创建了一个 PR（截至今天仍有待合并）。但想知道如何在 ios webviews 中实际启用暗模式，就像上面提到的那样。切换系统级主题时它不会自动发生。

我在这里遗漏了什么吗？

Answer 1

TLDR

将

AppTheme

 中 

Light

 的父级从 

DayNight

 更改为 

main/res/values/styles.xml

。

详情

您的应用程序的全局样式由

main/res/values

 目录中的一组 XML 文件控制。这些文件是由 React Native（或者在我的例子中是 Expo）自动生成的。这些文件中最重要的是

styles.xml

。

此文件包含一个名为

AppTheme

;

的元素

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:textColor">@android:color/black</item>
    <item name="android:editTextStyle">@style/ResetEditText</item>
    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
</style>

默认情况下，

AppTheme

的

parent

属性指的是

Light

主题。将其更改为 

DayNight

 解决了我的问题；

<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <item name="android:textColor">@android:color/black</item>
    <item name="android:editTextStyle">@style/ResetEditText</item>
    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
</style>

来源

我通过查看

GitHub 上的这个示例找到了这个解决方案。有关 DayNight

 父主题的更多信息可以在 

Google 文档中找到。