Can we set only one side shadow of View in React Native?

问题

As the title saying, how can we set only one side shadow of View in React Native, or hide any side shadow? What I want is showing the only one side shadow, any solutions?

回答1:

Use this

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

For example:

shadowOffset: { width: 0, height: 10 } shadows place only in bottom of View
shadowOffset: { width: 0, height: -10 } shadows place only in top of View
shadowOffset: { width: 10, height: 0 } shadows place only in right of View
shadowOffset: { width: -10, height: 10 } shadows place only in left of View

回答2:

I have implemented it by two ways:

1.Using react-native-linear-gradient Plugin:

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

2.Without using Plugin:

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

回答3:

Yes, You can make your shadow of your own view using like this code:

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

</View>

This help me pls use this according your use..

来源：https://stackoverflow.com/questions/50505771/can-we-set-only-one-side-shadow-of-view-in-react-native

标签

react-native

Shadow