답변 재: 이미지 위에 네이티브 backgroundColor 오버레이에 반응

0

//Fetching the background image from online, you can use any image source of

//Fetching the background image from online, you can use any image source of your choice.

const GoProImageBackGd = { uri: "https://images.pexels.com/photos/2462402/pexels-photo-2462402.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" };

// Setting the background image for the view:

 <View style={styles.GoProBox}>
            <ImageBackground source={GoProImageBackGd} resizeMode='cover' style={styles.goProBgImage}>
            <View style={styles.overlayView}/>
            <Text style={styles.goProText}> Want to join the hot section? Go hot with Pro!</Text>
            <GoProButton />
            </ImageBackground>


//Stylesheet

const styles = StyleSheet.create({
GoProBox: {
        width: '95%',
        height: 200,
        margin: 5,
        backgroundColor: '#00cc00',
        borderRadius: 10,
        alignSelf: 'center',
        overflow: 'hidden'

    },
goProBgImage: {
        width: '100%', height: '100%',


    },

    goProText: {
        textAlign: 'center',
        fontSize: 20,
        marginTop: 10,
        fontWeight: 'bold',
        padding: 10,
        color: 'white'

    },
GoProButton: {
        height: 60,
        width: 200,
        backgroundColor: 'red',
        borderRadius: 15,
        alignSelf: 'center',
        justifyContent: 'center',
        top: 50
    },
overlayView: {
        height: "100%",
        width: "100%",
        position: 'absolute',
        backgroundColor: 'rgba(0, 204, 0, 0.5)',

    }

})