Можем ли мы установить только одну боковую тень View в React Native? - PullRequest
Новая
       11

Можем ли мы установить только одну боковую тень View в React Native?

0 голосов
/ 24 мая 2018

Как гласит заголовок, как мы можем установить только одну боковую тень View в React Native или скрыть любую боковую тень?То, что я хочу, это показать только одну сторону тени, какие-либо решения?

Ответы [ 3 ]

0 голосов
/ 08 мая 2019

Я реализовал это двумя способами:

1.Использование реагировать-нативный-линейный градиент Плагин: 

<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>
0 голосов
/ 08 мая 2019

Используйте это 

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 } место для тенейтолько слева от вида

0 голосов
/ 24 мая 2018

Да, вы можете сделать свою тень своего собственного вида, используя этот код: 

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

</View>

Это поможет мне, пожалуйста, используйте это в соответствии с вашим использованием ..

...