如何在 React Native 的 Image 组件中添加褪色边框？答案

【问题标题】：How to add faded border in a Image component in React Native?如何在 React Native 的 Image 组件中添加褪色边框？
【发布时间】：2021-04-12 06:55:04
【问题描述】：

如何淡化下面显示的图像的边框或如何实现？任何帮助将不胜感激

【问题讨论】：

标签： react-native stylesheet

【解决方案1】：

您可以使用React Native Linear Gradient 库来实现这一点。

API 很简单，例如

<LinearGradient
  colors={['rgba(192,32,64,0.9)', 'transparent']}
  style={{position: 'absolute', left: 0, right: 0, bottom: 0, height: 200}}
  start={{x:0, y:1.0}}
  end={{x: 0, y: 0}}
/>

详情请参阅我的 Expo Snack 示例：https://snack.expo.io/@zvona/linear-gradient。

【讨论】：

请注意：a）这个库不支持径向渐变，这似乎是 OP 基于图像想到的，b）使用“透明”可能意味着渐变将逐渐变为透明iOS 上的黑色（请参阅 README - 不过我在零食版本中没有看到这种情况）