React Native安卓原生启动屏适配明暗模式切换背景色方法

你写的那种三元表达式写法在Android XML资源里是行不通的——Android XML资源是静态的，不支持这种动态代码逻辑判断。要实现启动屏随设备明暗模式自动切换背景色，得用Android原生的资源限定符机制，让系统根据当前UI模式自动加载对应资源，具体步骤如下：

1. 重构颜色资源，定义通用适配色名 #

• 在res/values/colors.xml中，添加一个通用的启动屏背景色名称，关联日间模式的颜色：

  <?xml version="1.0" encoding="utf-8" ?>
  <resources>
    <color name='lightBackground'>#F2F1F1</color>
    <color name='darkBackground'>#121212</color>
    <!-- 日间模式下的启动屏背景色 -->
    <color name="launcher_background">@color/lightBackground</color>
  </resources>
  

• 在res目录下新建values-night文件夹，在该文件夹内创建colors.xml文件，设置夜间模式对应的启动屏背景色：

  <?xml version="1.0" encoding="utf-8" ?>
  <resources>
    <!-- 夜间模式下的启动屏背景色 -->
    <color name="launcher_background">@color/darkBackground</color>
  </resources>
  

2. 修改启动屏的Layer-List资源文件 #

把你原来的启动屏drawable文件里的固定颜色引用，改成上面定义的通用色名：

<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@color/launcher_background" />
  <item
    android:width="120dp"
    android:height="120dp"
    android:drawable="@drawable/icon"
    android:gravity="center"
  />
</layer-list>

3. 确保App支持明暗模式适配 #

检查你的AndroidManifest.xml中application标签的主题设置，确保使用的是支持日间/夜间切换的主题（比如Theme.MaterialComponents.DayNight.NoActionBar或RN默认主题），同时可以添加uiMode到configChanges属性中，避免模式切换时重启Activity：

<application
  ...
  android:theme="@style/AppTheme"
  android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode">
  ...
</application>

这样设置后，系统会根据当前设备的明暗模式，自动加载values或values-night目录下的colors.xml文件，启动屏的背景色也就会跟着切换了。

内容的提问来源于stack exchange，提问作者Nilton Schumacher F