在图像上添加叠加阴影

Question

我正在尝试像我提供的示例一样在图像的底部创建阴影。我正在考虑只是叠加一个线性渐变并改变不透明度，我什至不确定这将如何准确地描绘它，但我假设有更好的方法。

明确地说，我不想在图像的外部创建阴影，我希望它覆盖图像。

谢谢你们的任何见解！

Answer 1

我在这里找到了一个很好的库可以使用，他们示例中的用法通过易于使用的道具提供了我正在寻找的内容。

https://www.npmjs.com/package/react-native-inset-shadow

Answer 2

Linear Gradient 使用 expo 线性渐变实现

<View style={{borderBottomLeftRadius: 30, borderBottomRightRadius: 30, overflow: 'hidden', top: 125}}>
      <LinearGradient
        colors={['transparent', 'rgba(0,0,0,0.4)', ]}
        style={{width: 300, height: 100,}}>
      </LinearGradient>
      </View>

Answer 3

import React from "react";
import { View, Image, } from "react-native";

const ShadowExample = (props) => {
  const imageURL = "https://designpress-10674.kxcdn.com/wp-content/uploads/2012/10/funny-horse-pictures/happy-to-see-you.jpg"
  const localStyles = {
    withShadowStyle: {
      justifyContent: "center",
      alignItems: "center",
      backgroundColor: "white",
      shadowColor: "#000",
      shadowOffset: {
        width: 0,
        height: 2,
      },
      shadowOpacity: 0.50,
      shadowRadius: 4,

      elevation: 3,      
    },     
  };

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <View style={{ ...localStyles.withShadowStyle, padding: 10, }}>
        <Image source={{ uri: imageURL, }} style={{ width: 200, height: 200, }} />
      </View>
    </View>
  )
}

附注查看 React Native 阴影生成器：

<块引用>

https://ethercreative.github.io/react-native-shadow-generator/