如何在本机反应中在图像底部添加深色渐变？

Question

我正在创建一个横幅，我们在图像顶部显示一些文本。由于背景图像，文本有点难以阅读，所以我可以使文本所在的背景变暗吗？

Answer 1

使用反应本机线性梯度

import LinearGradient from "react-native-linear-gradient"

<ImageBackground
    style={{width : '100%', height: 280}}
    source={{uri : "image_url"}}>

    <LinearGradient 
        colors={['#00000000', '#000000']} 
        style={{height : '100%', width : '100%'}}>



    </LinearGradient>

</ImageBackground>

结果

更新

作为 @codeSays404 注释，用于expo使用expo-linear-gradient。
只需替换上面代码中的这一行即可。

//replace this
import LinearGradient from "react-native-linear-gradient"
//with
import LinearGradient from "expo-linear-gradient"