react-native - 从上到下的半透明背景

Question

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

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

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: {

}

});

Answer 1

我找到了解决方案。

世博线性渐变透明显示为黑色

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

/>