Как применить тень, чтобы реагировать на собственный вид, не затрагивая элементы внутреннего вида?

Question

Пожалуйста, нажмите на изображение

Я хотел бы знать, как применить тень только к основному внешнему виду.Здесь, применяя тень, она применяется ко всем внутренним элементам

Answer 1

Хитрость, с помощью которой теневые элементы родительского элемента не наследуются дочернему элементу, заключается в том, чтобы установить цвет фона для компонента, для которого вы устанавливаете тень.Например, это будет:

<View 
  style={{ backgroundColor: '#fff' }}
  shadowOffset={{height: 10}}
  shadowColor='black'
  shadowOpacity={0.5}
>
  <Text style={styles.text}>{title}</Text>
</View>

К сожалению, это работает только с цветным фоном - когда установка прозрачного фона с RGBA или «прозрачный» не помогает.

Answer 2

На самом деле я не могу ответить, основываясь на простом изображении, но из моего предыдущего опыта установка shadowOffset на требуемую высоту и ширину должна сработать для iOS.

Подробнее об этом здесь: Смещение тени

Вот изображение того, как выглядит моя карта в следующем стиле:

marginLeft: 10,
    backgroundColor: 'white',
    shadowColor: 'blue',
    alignItems: 'center',
    shadowOffset: {width: 3, height: 3 },
    shadowOpacity: 1.0,
    borderRadius: 10,

Моя карточка Надеюсь, она вам подходит.