Как использовать Drop Shadows в React Native

Question

Я пытаюсь использовать код из здесь в моем собственном коде.

Я скопировал код vertabim в раздел своего проекта.

<View>
   <View style={{
                borderWidth: 1,
                borderRadius: 20,
                borderColor: '#ddd',
                borderBottomWidth: 0,
                shadowColor: '#000',
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.8,
                shadowRadius: 40,
                elevation: 3,
                width: 120,
                height: 150,
                overflow: "visible",
                }}>
                <Text>Mine</Text>
   </View>
</View>

Пример кода показывает такой результат

In my code I see this on Android. The box is really fat and opaque.

And on my iPhone I see this. No shadow box at all.

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

Кто-нибудь может мне здесь помочь? Как мне заставить это работать на обеих платформах? Я очень запутался

Answer 1

Я добавил несколько стилей в ваш код. Взгляните на это.

<View style={{
  flex: 1,
  alignItems: 'center',
  justifyContent: 'center',
}}>
  <View style={{
    borderRadius: 20,
    borderColor: '#000',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 12 },
    shadowOpacity: 0.99,
    shadowRadius: 16,
    elevation: 24,
    justifyContent: 'center',
    alignItems: 'center',
    width: 200,
    height: 230
  }}>
    <Text>Mine</Text>
  </View>
</View>

Похоже,