Блог

Главная - Вопросы по программированию - Отбрасывание тени для строки в react native

Отбрасывание тени для строки в react native

#css #reactjs #react-native #view #dropshadow

#css #reactjs #react-native #Вид #отбрасывание тени

Вопрос:

Я хочу реализовать отбрасывание тени для строки примерно так:

введите описание изображения здесь

Что я сделал до сих пор:

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

Ответ №1:

Используйте этот код, это может помочь вам, вы можете изменить цвет в качестве своей темы.

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

Комментарии:

1. Не помогло! это создает тень повсюду. Я просто хочу тень под невидимой линией.

2. У меня есть изменение, borderBottomWidth просто borderBottomWidth вы можете проверить, теперь это будет работать для вас.

3. К какому компоненту я должен применить этот стиль? Кнопка или представление или что-нибудь еще?

4.Вы можете скопировать эти apply и применить к <View> <Button> или любому компоненту.

5. Не сработало! Вы проверяли этот код на своем компьютере? Вы также можете поделиться ссылкой на snack expo.

Ответ №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>