Реагируйте на нативный цвет тени - PullRequest
0 голосов
/ 17 ноября 2018

Я работаю над мобильным приложением с React-Native, и мне нужно внедрить новый компонент.

Пример:

enter image description here

Итак, мой вопрос: как я могу добавить это теневое / размытое изображение на свой компонент?

Я знаю, как сделать размытие на изображении, но как я могу сделать этот эффект?

Спасибо

1 Ответ

0 голосов
/ 17 ноября 2018

Итак, в основном вы работаете с двумя изображениями: непрозрачность, blurRadius и абсолютное положение.

попробуй:

<View style={{elevation:12, position:'absolute', left:100, top:100, elevation:12, borderRadius:50, borderWidth: 1, borderColor:'rgba(255, 255, 2555, 0.4)',  overflow: 'hidden',  opacity:0.3}}>
    <Image blurRadius={10} style={{width:300, height:150}} source={{uri:'https://image.shutterstock.com/image-photo/beautiful-garden-flowers-450w-257560639.jpg'}} />
</View>            
<View style={{position:'absolute', left:95, top:90, borderRadius:50, borderWidth: 0, borderColor:'rgba(255, 255, 2555, 0.4)',   overflow: 'hidden'}}>
    <Image style={{width:300, height:150, }} source={{uri:'https://image.shutterstock.com/image-photo/beautiful-garden-flowers-450w-257560639.jpg'}} />
</View>
...