Question

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

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

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(
            <ImageBackground
                source={require('../images/lawrance.jpg')}
                style={styles.container}>
                    <View style={styles.overlay}></View>
                    <Text style = {[styles.textStyle, {paddingTop: 10}]} >My Account</Text>
                    <Image source= {require('../images/lawrance.jpg')}
                        style={styles.avatarStyle}/>
                    <Text style = {styles.textStyle} > Jenifer Lawrance</Text>
                    <Text style = {styles.textStyle} > +14155552671</Text>
                    <Balance style= {styles.balanceContainer}/>
            </ImageBackground>
        );
    }
}

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;

现在有两个问题：

更改ImageBackground的不透明度也会更改其子项的不透明度
无法更改不透明度的颜色

任何帮助表示赞赏！

设计屏幕：

https://dev.mysql.com/doc/refman/5.6/en/group-by-functions.html#function_count

已开发的屏幕

Answer 1

使用此代码，它正在运行，我只做了一个小改动

import React, {Component} from 'react';
    import {View, Text, StyleSheet, ImageBackground, Image,Dimensions} from 'react-native';

class AccountHeader extends React.Component{
    render(){
        return(
            <ImageBackground
                source={{uri:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoOVTmb0ILbDI6ggGhPKUkn3v4UKc2dNB-Kjng7aGM14UbvzKY'}}
                style={styles.container}>
                    <View style={styles.overlay}>
                    <Text style = {[styles.textStyle, {paddingTop: 10}]} >My Account</Text>
                    <Image source= {{uri:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoOVTmb0ILbDI6ggGhPKUkn3v4UKc2dNB-Kjng7aGM14UbvzKY'}}
                        style={styles.avatarStyle}/>
                    <Text style = {styles.textStyle} > Jenifer Lawrance</Text>
                    <Text style = {styles.textStyle} > +14155552671</Text>
                    </View>
            </ImageBackground>
        );
    }
}     

const styles = StyleSheet.create({
  container: {

},            
overlay: {
    backgroundColor:'rgba(255,0,0,0.5)',
},
    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;

Answer 2

尝试将容器的样式更改为

container: { 
 backgroundColor: 'rgba(255,0,0,.6)'
},

Answer 3

尝试一下：


#SVM classification
X_train, X_test, y_train, y_test = train_test_split(X, Y, test_size = 0.20)  
svclassifier = SVC(kernel='linear',gamma='auto',max_iter=1000, decision_function_shape='ovo')  
models=svclassifier.fit(X_train, y_train) 
y_pred = svclassifier.predict(X_test)


#Plot funtions
def make_meshgrid(x, y, h=.02):
     x_min, x_max = x.min() - 1, x.max()+1
     y_min, y_max = y.min() - 1, y.max()+1
     xx, yy = np.meshgrid(np.arange(x_min, x_max, h),np.arange(y_min, 
         y_max, h))
     return xx, yy

def plot_contours(ax, clf, xx, yy, **params):
     Z = clf.predict(np.c_[xx.ravel(), yy.ravel()])
     Z = Z.reshape(xx.shape)
     out = ax.contourf(xx, yy, Z, **params)
     return out


#PCA for D.R
pca = PCA(n_components=2)
pca.fit(X)
X_pca = pca.transform(X)

print("original shape:   ", X.shape)
print("transformed shape:", X_pca.shape)
X=X_pca

#Ploting results
fig, sub = plt.subplots()
plt.subplots_adjust(wspace=0.4, hspace=0.4)
X0, X1 = X[:, 0].flatten(), X[:, 1].flatten()
xx, yy = make_meshgrid(X0, X1)
plot_contours(sub, models, xx, yy, cmap=plt.cm.coolwarm, alpha=0.8)
sub.scatter(X0, X1, c=Y, cmap=plt.cm.coolwarm, s=20, edgecolors='k')
sub.set_xlim(xx.min(), xx.max())
sub.set_ylim(yy.min(), yy.max())
sub.set_xlabel('Sepal length')
sub.set_ylabel('Sepal width')
sub.set_xticks(())
sub.set_yticks(())
sub.set_title("TITLE")
plt.show()

有效

Answer 4

对我来说，只是对ImageBackground组件应用了一些不透明度，并同时使用了如下背景色：

<ImageBackground source={background} style={{ width: window.width, height: window.height - 24, backgroundColor: 'rgb(255,0,0)' }} resizeMode="cover" imageStyle={{opacity: 0.4}} >
</ImageBackground>

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

4 个答案: