从上到下的半透明背景答案

【问题标题】：Semitransparent background from top to bottom从上到下的半透明背景
【发布时间】：2018-10-25 12:47:03
【问题描述】：

我怎样才能实现这种背景透明度

我尝试过使用线性渐变，但无法实现透明度。即使我将渐变从透明变为纯色，我也会在应该透明的地方得到纯白色背景

class PrivacyPolicy extends Component {
static navigatorStyle = {
    navBarHidden: true
};

composePolicy(data) {
    return (
        <View>
            {data.header.length ? <Text style={styles.policyHeader}>{data.header}</Text> : null}
            {data.text.map((textItem, index) => <Text style={styles.policyText} key={index}>{textItem}</Text>)}
        </View>
    )
}

render = () => {
    return (
        <View style={styles.wrapper}>
            <Text style={styles.header}>Privacy Policy</Text>
            <ScrollView showsVerticalScrollIndicator={true}>
                <View style={styles.contentContainer}>
                    {policyData.map((policy) => this.composePolicy(policy))}
                </View>
            </ScrollView>
            <View style={styles.opa}>
                <LinearGradient colors={['transparent', 'rgba(0, 0, 0,0.4)', 'rgba(114, 110, 248,0.5)', 'rgb(79, 206, 249)']} style={styles.bottomDecoration}>
                </LinearGradient>
            </View>
        </View>
    )
}

}

const styles = StyleSheet.create({
wrapper: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: AppColors.white
},
header: {
    textAlign: 'center',
    fontSize: 22,
    fontWeight: 'normal',
    marginTop: 25,
    marginBottom: 30
},
contentContainer: {
    marginRight: 30,
    marginLeft: 30,
},
policyHeader: {
    color: '#162c57',
    fontSize: 22,
    fontWeight: 'bold',
    marginBottom: 25
},
policyText: {
    marginBottom: 15
},
bottomDecoration: {
    height: 100,
    // opacity: 0.3
},
opa: {

}

});

【问题讨论】：

到目前为止你尝试了什么？
你能在这里添加你的组件结构吗？

标签： react-native reactcsstransitiongroup react-css-modules

【解决方案1】：

我找到了解决办法。

Expo Linear Gradient transparent is showing up blackish

<LinearGradient
colors={[ 'rgba(255,255,255,0)', 'rgba(255,255,255,1)']}
style={{
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    height: 80,
}}

【讨论】：