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

Question

У меня есть изображение png с тенью в нем.

Но когда я пытаюсь добавить это в реагировать нативно, тень не появляется.

Я пытался дать этому виду тень. Мне удалось добавить верхнюю тень в IOS, но Android не поддерживает верхнюю тень.

Есть ли способ получить верхнюю тень в Android или способ показать полный png файл с тенью.

Я использую React Native 0.55.4 и Android 8.0.0

Заранее спасибо.

Answer 1

Мне нравится использовать act-native-shadow для создания теневых видов на Android.

Компонент будет выглядеть примерно так:

const shadowOpt = {
    width:100,
    height:100,
    color:"#000",
    border:2,
    radius:3,
    opacity:0.2,
    x:0,
    y:3,
    style:{marginVertical:5}
}
<Shadow setting={shadowOpt}>
  ... your view here
</Shadow>

Answer 2

Для Android используйте свойство elevation: 1 или реакция-нативная тень пример реакции-нативная тень

import React, {Component} from 'react'
import {
    StyleSheet,
    View,
    Text,
    ScrollView,
    Image,
    TouchableHighlight
} from 'react-native'

import {BoxShadow} from 'react-native-shadow'

export default class VideoCell extends Component {
    render = () => {
        const shadowOpt = {
            width:160,
            height:170,
            color:"#000",
            border:2,
            radius:3,
            opacity:0.2,
            x:3,
            y:3,

            style:{marginVertical:5}
        }

        return (
          <View style={{flex:1}}>
            <BoxShadow setting={shadowOpt}>
                <TouchableHighlight style={{
                  marginTop:10,
                    position:"relative",
                    width: 160,
                    height: 170,
                    backgroundColor: "#fff",
                    borderRadius:3,
                    // marginVertical:5,
                    overflow:"hidden"}}>
                 <Text>Wnand</Text>
                </TouchableHighlight>
            </BoxShadow>
            </View>
        )
    }
}