React-Native: 更改ImageBackground的透明度颜色

13 浏览
0 Comments

React-Native: 更改ImageBackground的透明度颜色

我一直在尝试开发下面提到的屏幕：

为此，我创建了以下组件：

import React, {Component} from 'react';
import {View, Text, StyleSheet, ImageBackground, Image} from 'react-native';
import Balance from './Balance.js';
class AccountHeader extends React.Component{
    render(){
        return(
            
                    
                    My Account
                    
                     Jenifer Lawrance
                     +14155552671
                    
            
        );
    }
}
const styles = StyleSheet.create({
    container: {
        backgroundColor:'red',
        opacity: 0.6
    },
    overlay: {
        backgroundColor:'transparent',
        opacity: 0.6
    },
    avatarStyle: {
        width:100, 
        height: 100,
        marginTop: 10,
        borderRadius: 50,
        alignSelf: 'center',
    },
    textStyle: {
        marginTop: 10,
        fontSize: 18,
        color: "#FFFFFF",
        fontWeight: 'bold',
        alignSelf: 'center',
    },
    balanceContainer:{
        padding:10,
    }
});
export default AccountHeader;

现在有两个问题：

  1. 改变ImageBackground的不透明度也会改变其子组件的不透明度
  2. 无法改变不透明度的颜色

任何帮助都将不胜感激！

设计屏幕：

enter image description here

开发的屏幕

enter image description here

0