React Native中是否可以只设置一个View的一侧阴影？

Question

如标题所述，在React Native中，我们如何设置视图的单侧阴影，或隐藏任何一侧的阴影？ 我想要的是只显示一个侧面的阴影，有什么解决方案吗？

- 木大白易

Answer 1

使用这个

const style = {
  shadowColor: "#000000",
  shadowOffset: { width: 0, height: 2 }, // change this for more shadow
  shadowOpacity: 0.4,
  shadowRadius: 6,
}

例如：

1. shadowOffset: { width: 0, height: 10 } 阴影仅出现在视图底部

2. shadowOffset: { width: 0, height: -10 } 阴影仅出现在视图顶部

3. shadowOffset: { width: 10, height: 0 } 阴影仅出现在视图右侧

4. shadowOffset: { width: -10, height: 10 } 阴影仅出现在视图左侧

- Hardy1207

---

在安卓中尝试使用阴影，但它不起作用。 - Jamal Ud Din

Answer 2

我已经通过两种方式实现了它：

1.使用react-native-linear-gradient插件：

<LinearGradient start={{ x: 1, y: 0 }} end={{ x: 1, y: 1 }} colors={['#e4e2e4', '#FFF']} style={{height:8}} ></LinearGradient>

2.不使用插件：

<View style={{height:1,backgroundColor:'#e9e8e9'}} ></View>
<View style={{height:1,backgroundColor:'#e4e2e4'}} ></View>
<View style={{height:1,backgroundColor:'#efeeef'}} ></View>
<View style={{height:1,backgroundColor:'#f5f5f5'}} ></View>
<View style={{height:1,backgroundColor:'#fafafa'}} ></View>
<View style={{height:1,backgroundColor:'#fdfdfd'}} ></View>
<View style={{height:1,backgroundColor:'#fefefe'}} ></View>
<View style={{height:1,backgroundColor:'#fff'}} ></View>

- Maneesh

---

我也用LinearGradient做了同样的事情，它完美地工作了。 - Brian Nguyen

Answer 3

是的，您可以使用以下代码制作自己视图的阴影：

<View style={{borderTopColor:'#ebebeb',borderTopWidth:1,borderBottomWidth:5,borderRightWidth:2,borderLeftWidth:2,borderColor:'#bcbaba',}}>

</View>

这个可以帮助我，请根据您的需求使用它。

- Mayank Garg

---

我已经尝试过您的代码，实际上它根本不像真正的阴影，特别是当宽度占满屏幕时。 - 木大白易