如何在React Native中获取PlatformColor的RGBA值？

PlatformColor是React Native用来映射原生系统颜色的特殊对象，它本身不会直接返回RGBA字符串，但可以通过以下方式获取对应的值：

1. 原生模块桥接（最可靠的方式） #

因为PlatformColor最终对应原生系统的颜色资源，所以需要通过原生代码解析后返回给JS端：

Android 端实现（Kotlin示例） #

写一个原生方法，接收颜色资源名，解析出ARGB值并转换为RGBA字符串：

import android.content.Context
import android.graphics.Color
import androidx.core.content.ContextCompat
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod

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

    @ReactMethod
    fun getColorRGBA(colorResName: String, promise: com.facebook.react.bridge.Promise) {
        try {
            val resId = reactApplicationContext.resources.getIdentifier(colorResName, "color", reactApplicationContext.packageName)
            if (resId == 0) {
                promise.reject("INVALID_RES", "Color resource not found")
                return
            }
            val color = ContextCompat.getColor(reactApplicationContext, resId)
            val alpha = Color.alpha(color) / 255.0
            val red = Color.red(color)
            val green = Color.green(color)
            val blue = Color.blue(color)
            promise.resolve("rgba($red, $green, $blue, $alpha)")
        } catch (e: Exception) {
            promise.reject("ERROR", e.message)
        }
    }
}

然后在JS端调用这个模块：

import { NativeModules } from 'react-native';

NativeModules.ColorUtils.getColorRGBA("system_neutral1_900")
  .then(rgba => {
    console.log(rgba); // 输出类似 rgba(0, 0, 0, 1)
    // 这里可以将rgba值用于你的自定义主题
  })
  .catch(err => console.error(err));

iOS 端实现（Swift示例） #

同样写一个原生方法，通过系统颜色名解析RGBA：

import UIKit
import React

@objc(ColorUtilsModule)
class ColorUtilsModule: NSObject, RCTBridgeModule {
    static func moduleName() -> String! {
        return "ColorUtils"
    }

    static func requiresMainQueueSetup() -> Bool {
        return true
    }

    @objc func getColorRGBA(_ named: String, resolver resolve: RCTPromiseResolveBlock, rejecter reject: RCTPromiseRejectBlock) {
        guard let color = UIColor(named: named) else {
            reject("INVALID_COLOR", "Color not found", nil)
            return
        }
        var red: CGFloat = 0, green: CGFloat = 0, blue: CGFloat = 0, alpha: CGFloat = 0
        color.getRed(&red, green: &green, blue: &blue, alpha: &alpha)
        let r = Int(red * 255)
        let g = Int(green * 255)
        let b = Int(blue * 255)
        resolve("rgba(\(r), \(g), \(b), \(alpha))")
    }
}

JS端调用方式和Android一致。

2. 注意事项 #

• PlatformColor的核心价值是动态跟随系统主题变化，提取固定RGBA值会失去这个特性。比如系统切换深色模式时，system_neutral1_900的实际颜色会变化，但你提取的RGBA是静态的。如果你的自定义主题需要适配系统动态主题，建议直接使用PlatformColor对象，而非提取RGBA。
• 不同系统版本的系统颜色值可能存在差异，提取的RGBA值在旧设备上可能和当前系统显示的颜色不匹配。

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