如何在本机反应中淡化视图的边缘? [英] How to fade the edge of a View in react native?

问题描述

示例 1

示例 2

如何在 React Native 中淡化视图的边缘，如上图所示?

How to fade the edge of a View like the above images in react native?

推荐答案

在 iOS 上，您可以使用 MaskedViewIOS 组件为淡入淡出效果创建透明的 alpha 蒙版.

On iOS, you can use the MaskedViewIOS component to create an transparent alpha mask for the fading effect.

对于渐变渐变本身，您可以使用类似 react-native-linear-gradient(也内置在 Expo 中)或半透明图像(黑色像素将显示内容，透明像素将阻止蒙版内容).

For the fading gradient itself, you can either use something like react-native-linear-gradient (which is also built into Expo) or a semi-transparent image (black pixels will show content through, transparent pixels will block masked content).

<MaskedViewIOS 
  maskElement={
    <LinearGradient colors={['black', 'transparent']} />
  }
>
  <YourContent />
</MaskedViewIOS>

这是一个小吃示例.

遗憾的是，MaskedView 尚未在 Android 上实现.我不知道实现这一点的简单方法，但很高兴被证明是错误的.

Unfortunately, MaskedView is not yet implemented on Android. I'm not aware of a simple way of implementing this, but would be happy to be proven wrong.

这篇关于如何在本机反应中淡化视图的边缘?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！