Expo NavigationBar setBackgroundColorAsync传入PlatformColor报错求助

问题分析 #

NavigationBar.setBackgroundColorAsync的Android底层实现期望接收int类型的颜色值（如0xFF000000），而PlatformColor返回的是包含资源引用的对象。RN的View样式系统内部会自动解析这种对象为实际颜色值，但Expo的这个API未做相同处理，导致传入时触发类型不匹配错误；用processColor处理也无效，因为它无法解析PlatformColor返回的资源引用对象。

可行解决方案 #

方案1：通过原生模块获取系统颜色的十六进制值 #

自己实现轻量原生模块，在Android端解析系统颜色资源，返回对应的十六进制字符串给JS端，再传入setBackgroundColorAsync。

步骤1：编写Android原生模块

创建SystemColorModule.kt文件：

package com.yourproject.systemcolormodule

import android.content.res.Resources
import com.facebook.react.bridge.Promise
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod

class SystemColorModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
    override fun getName(): String = "SystemColorModule"

    @ReactMethod
    fun getSystemColor(resName: String, promise: Promise) {
        try {
            // 解析系统颜色资源ID（去掉@android:color/前缀）
            val resourceId = Resources.getSystem().getIdentifier(resName, "color", "android")
            if (resourceId == 0) {
                promise.reject("RESOURCE_NOT_FOUND", "System color resource not found: $resName")
                return
            }
            // 获取颜色的int值
            val colorInt = Resources.getSystem().getColor(resourceId, null)
            promise.resolve(colorInt)
        } catch (e: Exception) {
            promise.reject("GET_COLOR_FAILED", e.message, e)
        }
    }
}

纯RN项目需在MainApplication.kt中注册模块，Expo项目通过config plugin配置注册。

步骤2：JS端调用

import { NativeModules, Platform } from 'react-native';
import { NavigationBar } from 'expo-navigation-bar';

// 获取系统颜色的十六进制字符串
async function getSystemColorHex(colorResource) {
    if (Platform.OS !== 'android') return null;
    try {
        // 提取资源名称（如从@android:color/system_neutral2_900得到system_neutral2_900）
        const resName = colorResource.replace(/^@android:color\//, '');
        const colorInt = await NativeModules.SystemColorModule.getSystemColor(resName);
        // 将int颜色值转为带alpha通道的十六进制字符串
        return `#${colorInt.toString(16).padStart(8, '0')}`;
    } catch (error) {
        console.error('获取系统颜色失败:', error);
        return null;
    }
}

// 使用示例
async function setNavigationBarThemeColor() {
    const colorHex = await getSystemColorHex('@android:color/system_neutral2_900');
    if (colorHex) {
        await NavigationBar.setBackgroundColorAsync(colorHex);
    }
}

方案2：硬编码主题颜色的十六进制值（临时方案） #

如果应用主题颜色是固定的几个系统颜色，可通过Android Studio颜色选择器或系统源码获取对应十六进制值，直接传入API：

await NavigationBar.setBackgroundColorAsync('#FF1D1D1F'); // 示例值，需根据实际颜色调整

此方案不支持动态跟随系统主题变化，仅适用于固定配色场景。

方案3：请求官方支持 #

在Expo的GitHub仓库提交Issue，请求官方为setBackgroundColorAsync添加PlatformColor支持，让API与RN的View样式系统保持一致行为。

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