在本机反应中为一条线投下阴影答案

【问题标题】：Drop shadow for a line in react native在本机反应中为一条线投下阴影
【发布时间】：2023-03-08 09:27:01
【问题描述】：

我想为这样的线条实现投影：

到目前为止我做了什么：

<View style=
  {{
    elevation: 5,
    borderBottomWidth: 2,
    bottom: 1,
  }}
>
</View>

【问题讨论】：

标签： css reactjs react-native view dropshadow

【解决方案1】：

使用此代码可能会对您有所帮助，您可以将颜色更改为您的主题。

cardContainer: {
 borderBottomWidth: 1,
 borderColor: #4d4d4d,
 shadowColor: #4d4d4d,
 shadowOffset: {
  width: 0,
  height: 8,
 },
 shadowOpacity: 0.8,
 shadowRadius: 13.51,
 elevation: 5,
}

【讨论】：

没有帮助！这是在四周制造阴影。我只想要一条看不见的线下的阴影。
我已经更改 borderBottomWidth 只是 borderBottomWidth 你现在可以测试这对你有用。
我应该将这些样式应用到哪个组件？一个按钮或一个视图或其他什么？
您可以复制这些 apply 并应用到<View> <Button> 或任何组件。
没用！你在你的机器上检查过这个代码吗？您也可以分享零食博览会链接。

【解决方案2】：

import Svg, { LinearGradient, Defs, Stop, Rect } from 'react-native-svg'

<Svg height="100" width="100%" style={{ zIndex: 1, marginTop: -50 }}>
    <Defs>
        <LinearGradient id="grad" x1="0" y1="0" x2="0" y2="1">
            <Stop offset="0" stopColor="#e6e6e6" stopOpacity="1" />
            <Stop offset="1" stopColor="#e6e6e6" stopOpacity="0.01" />
        </LinearGradient>
    </Defs>
    <Rect height="100" width="100%" fill="url(#grad)" />
</Svg>

【讨论】：