Javascript 反应本机CSS以使父容器透明

我正在制作一个应用程序，其页脚与Snapchat非常相似，因为有三个图标对下面的内容不透明，但容器是透明的。效果应该类似于这里所问的w/web css:。我当前的页脚如下所示：

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

正如您在评论中所看到的，我尝试了解决方案

rgba（…）

，但它没有给我想要的效果。现在，

opacity:0.8

解决方案为我提供了一个页脚容器及其子容器，其透明度为

0.8

opacity。然而，理想情况下，只有页脚是透明的。三个子图标是不透明的。

请尝试以下操作：

backgroundColor:“透明”

---

有一个“透明”枚举用于

backgroundColor

您不能尝试这样做。将组件设置为80%不透明度时，组件及其子组件的最大不透明度为80%。孩子们永远不能超过80%

解决办法在于你的尝试。通常人们希望背景透明，这就是rgba（）发挥作用的地方。使用该选项设置透明度

使事情透明化的可能解决方案有：

• 使用

  不透明度

  ，这也会使所有的子项都褪色
• 使用rgba（）并将alpha设置为所需的不透明度
• 使用半透明图像作为背景
• 在要受影响的元素中定位绝对div（应该是相对的和透明的）

---

为什么RGBA不适合您，因为这就是解决方案？那么，你能举例说明预期的结果吗？

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'

},