Question

我的Imagebackground有一个parentconatiner，我想将backgroundColor之一的childView设置为红色，并且它应该是透明的，以便父容器图像可见

应该是这样

这是我的代码

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;

我已经尝试过rgba和不透明度，但是仍然无法正常工作

请帮助我该怎么做

Answer 1

您需要删除Container的backgroundColor，以使透明性一直贯穿到父容器，否则透明性仅允许看到后面的白色背景

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

如何将“视图”背景色设置为红色，并且应该透明

1 个答案: