如何在本机反应中在图像底部添加暗渐变？答案

【问题标题】：How add dark gradient on bottom of an image in react native?如何在本机反应中在图像底部添加暗渐变？
【发布时间】：2021-08-12 09:00:48
【问题描述】：

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

【问题讨论】：

这个想法是使用深色叠加层，您可以分层考虑，最后一层是图像，接下来是深色叠加层容器，然后是您想要的文本，如果可以的话，我会写了一些代码，所以我很抱歉。

标签： reactjs react-native expo

【解决方案1】：

使用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"

【讨论】：

感谢按预期工作。我使用的是 expo，所以不得不使用不同的渐变包。

【解决方案2】：

因此，您可以通过将 backgroundColor 设置为假设为 '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>

如果可行，请告诉我

【讨论】：

【解决方案3】：

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

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

【讨论】：

我没有使用图像背景。现在我根据上述答案及其工作进行更改