React native 如何将视图背景颜色设置为红色，并且应该是透明的

我有一个

Imagebackground

用于我的

parentconatiner

，我想将其中一个

childView

的

backgroundColor

设置为红色，并且应该是透明的，以便父容器图像可见

应该是这样的

这是我的密码

import React, { Component } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import colors from '../styles/colors';
import strings from '../localization/strings';

class Appointments extends Component {
    render() {
        return (

            <View style={styles.Container}>
                <View style={{ backgroundColor: 'rgba(52, 0, 0, 0.8)', shadowOpacity: 0.2, padding: 5 }}>

                   <View style={styles.childContainer}>
                            <Image style={{ justifyContent: 'flex-start', alignItems: 'flex-start' }} source={require('../assets/calender-Icon.png')}
                            />

                        <View style={styles.dateTextContainer}>
                          <Text style={styles.childText}>Appointment</Text>
                          <Text style={[styles.childText, { fontSize: 26 }]}>Oct24, 2018</Text>   
                          <Text style={[styles.childText, { fontSize: 16, fontWeight: 'bold' }]}>10:30 am</Text>
                     </View> 
                    </View>


                </View>

                <View style={styles.borderText}>
                    <View style={{ flexDirection: 'row' }}>
                        <Image source={require('../assets/add-Icon.png')} />
                        <Text style={[styles.itemName, { fontSize: 16 }]}>New</Text>
                    </View>
                    <View style={{ flexDirection: 'row' }}>
                        <Image source={require('../assets/seeAll-Icon.png')} />
                    <Text style={[styles.itemName, { fontSize: 16 }]}>See All</Text>
                    </View>
                </View>

            </View>


        );
    }
}
const styles = StyleSheet.create({
    Container: {
        backgroundColor: colors.white,
        borderRadius: 4,
        borderWidth: 1,
        borderColor: colors.red
    },
    childContainer: {
        justifyContent: 'space-between',
        alignItems: 'flex-start',
        margin: 15,
        flexDirection: 'row',
    },
    textStyle: {
        fontSize: 16,
        color: colors.black,
        justifyContent: 'flex-end',
        alignItems: 'flex-end',
        fontWeight: 'bold'
    },
    childText: {
        color: colors.white,
        fontSize: 18,
    },
    dateTimeContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginHorizontal: 10,
        alignItems: 'flex-end',
    },
    dateTextContainer: {
        flexDirection: 'column',
        marginHorizontal: 10,
        justifyContent: 'flex-end',
        alignItems: 'flex-end',
    },
    listItem: {
        borderWidth: 1,
        borderColor: colors.pureBlue,
        alignItems: 'center',
        justifyContent: 'center',
        marginHorizontal: 5,
        paddingVertical: 5,
        margin: 30
    },
    itemName: {
        fontSize: 14,
        color: colors.black,
        margin: 2,
        paddingLeft: 4
    },
    border: {
        borderRadius: 4,
        borderWidth: 1,
        borderColor: colors.light_gray,
        marginHorizontal: 20
    },
    imageText: {
        flexDirection: 'column',
        margin: 10,
        flexWrap: 'wrap',
        flex: 1
    },
    borderText: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        margin: 10
    }

});
export default Appointments;

import React，{Component}来自'React'；
从“react native”导入{视图、文本、图像、样式表}；
从“../style/colors”导入颜色；
从“../localization/strings”导入字符串；
类扩展组件{
render（）{
返回(
约会
2018年10月24日
上午10:30
新的
见识
);
}
}
const styles=StyleSheet.create({
容器：{
背景颜色：colors.white，
边界半径：4，
边框宽度：1，
边框颜色：colors.red
},
儿童容器：{
justifyContent:'之间的空间'，
alignItems:'flex start'，
差额：15，
flexDirection:'行'，
},
文本样式：{
尺寸：16，
颜色：颜色，黑色，
justifyContent:“柔性端”，
对齐项目：“柔性端”，
fontWeight:“粗体”
},
儿童文本：{
颜色：颜色，白色，
尺码：18，
},
日期时间容器：{
flexDirection:'行'，
justifyContent:'之间的空间'，
marginHorizontal:10，
对齐项目：“柔性端”，
},
dateTextContainer：{
flexDirection:'列'，
marginHorizontal:10，
justifyContent:“柔性端”，
对齐项目：“柔性端”，
},
列表项：{
边框宽度：1，
边框颜色：颜色。纯蓝色，
对齐项目：“居中”，
为内容辩护：“中心”，
marginHorizontal:5，
填充垂直：5，
差额：30
},
项目名称：{
尺寸：14，
颜色：颜色，黑色，
差额：2，
paddingLeft:4
},
边界：{
边界半径：4，
边框宽度：1，
边框颜色：颜色。浅灰色，
marginHorizontal:20
},
图像文本：{
flexDirection:'列'，
差额：10，
flexWrap:“wrap”，
弹性：1
},
边框文本：{
flexDirection:'行'，
justifyContent:'之间的空间'，
差额：10
}
});
导出默认约会；

我尝试过rgba和不透明，但仍然不起作用

---

请帮助我如何执行此操作

您需要删除容器的背景色，以允许透明度一直到父容器，否则透明度将只允许看到后面的白色背景

Container: {
  // backgroundColor: colors.white,
  ...
},

你试过不透明吗