如何让 React Native Component 背景透明？

Question

我正在使用包含两个屏幕的选项卡导航，我需要使每个屏幕的背景透明以便应用程序背景可见。

这就是它现在的样子，我希望你可以在 Tabs 导航器上看到的背景在整个屏幕上可见。

这是 Tabs 组件：

const Tabs = props => {

return(
    <Background source={require('../../assets/bg_image.png')}>
        <Tab.Navigator screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
                 if (route.name === 'Notifications') {
                    return <Image style={styles.tabIcon} source={require('../../assets/notifications_icon.png')}/>
                }else if(route.name === 'Profile'){
                    return <Image style={styles.tabIcon} source={require('../../assets/profile_icon.png')}/>
                }
            },
            tabBarInactiveTintColor: '#ffffff',
            tabBarActiveTintColor: 'red',
            tabBarStyle: {
                backgroundColor: '#D3D3D338',
            },
            tabBarShowLabel: false,
            headerShown: false,
            
            })}
        >
            <Tab.Screen name="Notifications" component={Notifications}></Tab.Screen>
            <Tab.Screen name="Profile" component={Profile}></Tab.Screen>
        </Tab.Navigator>
    </Background>
);
}

这是通知组件：

import {View, Text, StyleSheet} from 'react-native';

const Notifications = props => {
    return(
        <View style={styles.content}>
            
        </View>
    );
}

const styles = StyleSheet.create({
content:{
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#00000000'
}
});
export default Notifications;

这是背景组件：

import {ImageBackground, StyleSheet} from 'react-native';

const Background = props => {
    return(
        <ImageBackground source={props.source} resizeMode="cover" style={{...styles.bgImage, width: '100%', height: '100%'}}>
            {props.children}
        </ImageBackground>
    );
};

const styles = StyleSheet.create({
    bgImage: {
        flex: 1
    },
    safeArea: {
        flex: 1, 
        width: '100%',
        justifyContent: 'center',
    }
});

export default Background;

Answer 1

在Tab.Navigator 上使用名为“ sceneContainerStyle ”的道具并将backgroundColor设置为透明

下面的一个例子。

<ImageBackground style={{flex: 1}} source={{ uri: "https://reactjs.org/logo-og.png" }} resizeMode="cover">
        <Tab.Navigator
        sceneContainerStyle={{backgroundColor: 'transparent',}}
        screenOptions={({ route }) => ({
            tabBarStyle: {
                backgroundColor: 'transparent',
            },
        })}>
        <Tab.Screen name="Home" component={Test} options={{ 
            headerStyle: { backgroundColor: 'transparent' } , 
        }} />
        </Tab.Navigator>
    </ImageBackground>

你需要做什么

sceneContainerStyle={{backgroundColor: 'transparent',}}

附上最终结果的图像

Answer 2

使用 rgba 值作为背景颜色：例如： rgba(255, 255, 255, 0.2)其中 0.2 是从 0 到 1 的不透明度范围

Answer 3

如果您使用十六进制表示颜色，则可以在此处遵循透明度的颜色代码https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4