在 React Native 中为一行添加阴影

Question

我想像这样为一行实现投影：

到目前为止我做了什么：

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

Answer 1

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

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

Answer 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>

在 React Native 中为一行添加阴影

Drop shadow for a line in react native

css

reactjs

react-native

view

dropshadow