React Native 渐隐渐变包装器

rn-fade-wrapper 是一个简单且高性能的 React Native 组件，能够为任何内容的边缘添加平滑且可自定义的渐隐渐变效果。非常适合提升可滚动容器、列表、轮播、模态框或任何溢出内容视图的用户体验。

✨ 特性

• ⚡ 原生渲染支持 iOS 和 Android
• 🔁 支持垂直和水平渐变方向
• 🎨 完全可自定义的渐隐大小和颜色（可针对每边或统一设置）
• ↕️ 可选的 inward 模式，实现向内容方向渐隐而非向外
• 🧩 简单的 API：即插即用包装器，属性直观
• 💪 性能优异，开销低 — 适合滚动视图和动画使用

📦 安装

yarn add rn-fade-wrapper

or

npm install rn-fade-wrapper

Expo

该库在 Expo 中可用（使用 expo prebuild），无需额外配置。

📱 平台支持

| 平台 | 旧架构 | Fabric | |----------|----------|--------| | iOS | ✅ | ✅ | | Android | ✅ | ✅ |

🚀 快速开始

import { FadeWrapper } from 'rn-fade-wrapper';
const MyComponent = () => {
  return (
    
      
        Fading edges example
      
    
  );
};

🧩 属性

| 属性 | 类型 | 默认值 | 描述 | |--------------|----------------------------|----------------------|-------------| | color | string | "#ffffff" | 渐变色（可以是任何有效的颜色字符串） | | size | number | 20 | 统一的渐变大小，单位为点 | | style | ViewStyle | { zIndex: 2 } | 应用于包装视图的自定义样式 | | inward | boolean | false | 使渐变向内（朝向中心）而非向外淡出 | | sizes | { top?: number, right?: number, bottom?: number, left?: number } | undefined | 每个边的特定渐变大小（覆盖 size 和 orientation） | | orientation| 'horizontal' \| 'vertical' | 'vertical' | 方向预设：将 size 应用于上下或左右 | | children | React.ReactNode | — | 你包装的内容 |

注意： sizes 优先于 size 和 orientation。

🎛 示例

🎯 自定义边 + 向内渐变：

📜 横向滚动淡出效果：

  
    {/ content /}
  

🛠 引擎内部

• iOS: 在原生 UIView 内使用 CAGradientLayer
• Android: 使用 Canvas 在自定义 ViewGroup 上绘制 LinearGradient
• 通过平台特定的逻辑处理布局和重新渲染以确保一致性

💡 用户体验提示

使用 rn-fade-wrapper 来微妙地指示内容溢出——特别是在轮播图、滚动视图和水平滑块中。渐变效果有助于提示用户还有更多内容可滚动，提升互动体验。

📘 许可证

MIT — 免费使用、改进和贡献 🎉

--- Tranlated By Open Ai Tx | Last indexed: 2025-12-08 ---