javascript - React-native CSS 使父容器透明

Question

我正在制作一个应用程序，其页脚与 Snapchat 的页脚非常相似，因为有三个图标对下面的内容不透明，但容器是透明的。效果应该类似于此处使用 web css 的要求:How to make parent transparent but not the child? .我当前的页脚如下:

        <View style={appFooter.container}>
            <Grid>

                <Col size={17} > </Col>

                <Col size={22} style={feedItem.centerItems}>
                    <Profile active={onProfile}/>
                </Col>

                <Col size={22} style={feedItem.centerItems} >
                    <Spice active={onFire} />
                </Col>

                <Col size={22} style={feedItem.centerItems}>
                    <News active={onNews} />
                </Col>

                <Col size={17} > </Col>

            </Grid>
        </View>

css 在哪里:

container : {

      position: 'absolute'
    , bottom  : 0
    , left    : 0
    , right   : 0
    , height  : 50

    // , backgroundColor: 'rgba(0,0,0,0.1)'
     // '#00000000'
    , opacity : 0.8


    , flexDirection  : 'column'
    , justifyContent : 'center'
    , alignItems     : 'center'

},

正如您在评论中看到的那样，我已经尝试了解决方案 rgba(...) 但它没有给我想要的效果。现在，opacity: 0.8 解决方案为我提供了一个页脚容器和其不透明度为0.8 的子容器。然而，理想情况下只有页脚是透明的。三个子图标是不透明的。

Answer 1

你不能随心所欲地去做。当您将组件的不透明度设置为 80% 时，它及其子项的不透明度最大为 80%。 children 永远不能超过 80%。

解决方案在于您评论的尝试。通常人们想要透明的背景，这就是 rgba() 发挥作用的地方。用它来设置透明度。

使事情变得透明的可能解决方案是:

• 使用opacity，它也会淡出它的所有 child
• 使用 rgba() 并将 alpha 设置为所需的不透明度
• 使用半透明图像作为背景
• 在您想要受影响的元素中放置一个绝对 div(应该是相对的和透明的)。