React Native非Expo环境下强制仅浅色主题的问题求助

问题描述 #

通过React Native CLI构建APK并安装至设备后，切换系统主题时应用主题会随之变更，导致TextInput组件文本变为白色，出现白字白底的问题，部分组件背景色也变为灰色。尝试过修改styles.xml父主题、调整AndroidManifest.xml配置、在MainActivity.java中添加AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);、在styles.xml中添加<item name="android:forceDarkAllowed">false</item>等操作，但均未生效。

当前环境版本 #

• react-native 0.76
• gradle: 8.0.1

当前配置 #

styles.xml #

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:textColor">#000000</item>
        <item name="android:forceDarkAllowed">false</item>
        <!-- <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item> -->
    </style>
</resources>

AndroidManifest.xml（注：当前配置存在错误，正确配置参考下文） #

<resources>
       <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
           <item name="android:textColor">#000000</item>
           <item name="android:forceDarkAllowed">false</item>
           <!-- <item name="colorPrimary">@color/colorPrimary</item>
           <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
           <item name="colorAccent">@color/colorAccent</item> -->
        </style>
    </resources>

可行解决步骤 #

1. 修正AndroidManifest.xml配置错误 #

你当前的AndroidManifest.xml内容存在错误，<resources>和<style>节点不应出现在该文件中。正确的配置是在<application>标签中指定应用主题：

<application
    android:name=".MainApplication"
    android:label="@string/app_name"
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:allowBackup="false"
    android:theme="@style/AppTheme"> <!-- 确保此处关联AppTheme -->
    <!-- 其他Activity、Service等配置 -->
</application>

2. 更新主题父类与AppCompat依赖 #

在android/app/build.gradle中确保AppCompat依赖为最新版本：

dependencies {
    implementation 'androidx.appcompat:appcompat:1.6.1'
    // 保留其他原有依赖
}

修改styles.xml的父主题为适配React Native的Material组件主题：

<resources>
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
        <item name="android:textColor">#000000</item>
        <item name="android:forceDarkAllowed">false</item>
        <item name="android:windowLightStatusBar">true</item> <!-- 保证状态栏文字为深色 -->
    </style>
</resources>

3. 在MainApplication中设置夜间模式 #

React Native 0.76的应用初始化逻辑在MainApplication而非MainActivity，需在MainApplication.java的onCreate方法中强制关闭夜间模式：

import androidx.appcompat.app.AppCompatDelegate;

@Override
public void onCreate() {
    super.onCreate();
    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
    // 其他初始化代码
}

4. 清理缓存并重新构建 #

执行以下命令彻底清理缓存后重新打包APK：

cd android
./gradlew clean
cd ..
npx react-native run-android --variant=release

5. 为TextInput显式设置样式 #

在React Native代码中给TextInput明确指定文本颜色和背景色，避免系统主题的默认影响：

<TextInput
    style={{
        color: '#000000',
        backgroundColor: '#ffffff',
        // 其他自定义样式
    }}
    // 组件其他属性
/>

内容的提问来源于stack exchange，提问作者Xeik