设置状态栏后台React Native iOS/Android的rgba值

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}}