React Native iOS/Android：为状态栏背景设置RGBA值

针对你的需求，有两种简单可行的方案：

方案一：直接传入带Alpha通道的颜色值 #

React Native 支持两种带透明度的颜色格式，直接传入即可：

1. RGBA格式：比如要设置黑色50%透明，就传rgba(0, 0, 0, 0.5)
2. 8位十六进制格式：前6位是RGB值，最后两位是透明度（范围00-FF，50%对应80），比如黑色50%透明就是#80000000

调用示例：

<CustomStatusBar backgroundColor="rgba(0, 0, 0, 0.5)" />

方案二：给组件新增透明度参数（灵活控制） #

如果需要单独控制透明度，不用每次修改颜色值，可以修改你的自定义组件，新增opacity属性：

修改后的组件代码：

import React from 'react';
import { Platform, StatusBar, View } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const CustomStatusBar = (props: { backgroundColor: string; opacity?: number; [key: string]: any }) => {
  const { backgroundColor, opacity = 1, ...rest } = props;
  const insets = useSafeAreaInsets()
  const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? insets.top : StatusBar.currentHeight

  return (
    <View style={{ 
      backgroundColor: backgroundColor, 
      height: STATUS_BAR_HEIGHT,
      opacity: opacity
    }}>
      <StatusBar translucent backgroundColor={backgroundColor} {...rest} />
    </View>
  )
}

export default CustomStatusBar

调用时只需传入基础颜色和透明度：

<CustomStatusBar backgroundColor="#000000" opacity={0.5} />

注意：Android平台下，StatusBar的translucent属性开启后，状态栏本身的背景透明度依赖外层View的样式，所以外层View的透明度设置会直接影响状态栏视觉效果。

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