响应本机CSS以使父容器透明

我正在制作一个应用程序,它的页脚非常类似于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 不透明度。但理想情况下,只有页脚是透明的。三个子图标是不透明的。