Question

正如标题所说，我们怎样才能在React Native中设置View的一个侧面阴影，或隐藏任何侧面阴影？我想要的是显示唯一的一面阴影，任何解决方案？

Answer 1

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

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

</View>

这有助于我根据你的用途使用它。

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>

Answer 3

使用此

your_style : {
   ...
    shadowColor: "#000000",
    shadowOffset: { width: 0, height: 2 }, // change this for move shadow
    shadowOpacity: 0.4,
    shadowRadius: 6,
   ...
  },

例如：

 1. shadowOffset: { width: 0, height: 10 } shadows place only in bottom of View

 2. shadowOffset: { width: 0, height: -10 } shadows place only in top of View

 3.shadowOffset: { width: 10, height: 0 } shadows place only in right of View  

 4.shadowOffset: { width: -10, height: 10 } shadows place only in left of View

我们可以在React Native中只设置View的一个侧面阴影吗？

3 个答案: