如何在 React Native 中的图像底部添加深色渐变？

Question

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

Answer 1

所以你可以通过假设一个带有背景颜色的文本容器来实现这一点'rgba(0,0,0,0.5)'。

例如

<Image>
<View style={{
position:'absolute',
zIndex:2
backgroundColor:'rgba(0,0,0,0.5)'
bottom:0
}} >
<Text>Hey</Text>
</View>
</Image>

如果可行请告诉我

Answer 2

您正在使用 ImageBackground 组件吗？一个简单的解决方案是配置文本的背景颜色。可以将其设置为 RGBA 值。尝试将其设置为 backgroundColor: "#00000060"。您可以查看 ImageBackground 页面上的示例。

如果您不喜欢矩形形状，可以添加 borderRadius: 200 来创建圆边。

Answer 3

使用react-native-linear-gradient

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"

如何在 React Native 中的图像底部添加深色渐变？

How add dark gradient on bottom of an image in react native?

reactjs

react-native

expo

更新