React Native: как применить shadow и borderRadius к представлению?

Question

Есть ли способ применить shadow И borderRadius к компоненту View, с тенью, следующей за закругленными углами?

В настоящее время вы должны установить overflow: 'hidden' для borderRadius работать, но при этом удаляются тени.

Это, очевидно, старая и известная проблема в React Native, которая, вероятно, не будет исправлена ​​в ближайшем будущем.В этом выпуске был предложен обходной путь, заключающийся в наложении двух представлений, но не был приведен пример кода.

Кто-нибудь может привести пример кода этого предложенного решения?Будет ли он следовать закругленным углам (я сомневаюсь в этом)?

Есть ли пакет с каким-то нативным связыванием вуду, выполняющим трюк ?

Есть ли другое решение?

Я уже пробовал решение из этого вопроса , но оно не сработало для View, пропеллер borderRadius не работает и выдает предупреждение, рекомендующее вставить его в style prop.

Answer 1

Да, вот что они имели в виду:

const shadowsStyling = {
    width: 100,
    height: 100,
    shadowColor: "#000000",
    shadowOpacity: 0.8,
    shadowRadius: 2,
    shadowOffset: {
      height: 1,
      width: 0
    }
}

<View styles={shadowsStyling}>
   <View styles={{width: '100%', height: '100%', borderRadius: 10}} />
</View>