為狀態欄背景設置 rgba 值 React Native iOS/Android

Question

我正在使用 React Native.68.1，我正在嘗試設置我在 SO 上找到的自定義 StatusBar。 它確實有效，但是，它只使用十六進制值（無 alpha 通道）。 如何將其設置為狀態欄具有 50% 不透明背景的位置？ 這是我的自定義狀態欄：

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

const CustomStatusBar = (props: any) => {
  const { backgroundColor, ...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 }}>
      <StatusBar translucent backgroundColor={backgroundColor} {...rest} />
    </View>
  )
}

export default CustomStatusBar

Answer 1

我開發了一種相同的東西來為我的 HEX 值添加不透明度，它相當簡單：

export const OPACITY_PERCENTAGES = {
  PER100: 'FF',
  PER90: 'E6',
  PER80: 'CC',
  PER70: 'B3',
  PER60: '99',
  PER50: '80',
  PER40: '66',
  PER30: '4D',
  PER20: '33',
  PER10: '1A',
  PER00: '00'
};

export const opacityAddedHex = (hex, opac = OPACITY_PERCENTAGES.PER100) => {
  const hexRegex = /^#([0-9a-f]{3}){1,2}$/i;

  if (hexRegex.test(hex)) {
    return `${hex}${opac}`;
  }

  return hex;
};

基本上你需要通過 HEX 和OPACITY_PERCENTAGES方面的不透明度。

希望能解惑，疑惑

Answer 2

這就是能夠解決我的問題的原因：

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

const CustomStatusBar = (props: any) => {
  const { backgroundColor, ...rest } = props;
  const insets = useSafeAreaInsets()
  const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? insets.top : StatusBar.currentHeight

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

export default CustomStatusBar

這是我調用它時使用的樣式：

style={{position: 'absolute', top: 0, left: 0, right: 0, zIndex: 999}}