# @bsky\.app/expo-scroll-edge-effect 中文文档

规范地址：https://npmcn.com/package/%40bsky.app/expo-scroll-edge-effect/

版本：0\.1\.11
npm 元数据更新时间：2026-11-01T18:38:02.935Z
中文译文更新时间：2026-11-08T17:15:56.600Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bsky.app/expo-scroll-edge-effect
原文对照：https://npmcn.com/package/%40bsky.app/expo-scroll-edge-effect/?lang=original
项目主页：https://github.com/bluesky-social/expo-scroll-edge-effect#readme
源码仓库：https://github.com/bluesky-social/expo-scroll-edge-effect

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：31.8 kB，44 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：expo \*，react \*，react-native \*
- 首次发布：2026-03-10T13:58:19.235Z
- 最新版本发布：2026-11-01T18:38:02.582Z
- 近 30 天下载量：322266（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：7（近 12 个月 7 个）

## 中文简介

用于 UIScrollEdElement 容器接口的 Expo 模块

## 安装

```sh
npm install @bsky.app/expo-scroll-edge-effect
```

也可以使用：`pnpm add @bsky.app/expo-scroll-edge-effect`、`yarn add @bsky.app/expo-scroll-edge-effect`、`bun add @bsky.app/expo-scroll-edge-effect`

## README

# @bsky.app/expo-scroll-edge-effect (英语)

展览模块包装 [`UIScrollEdgeElementContainerInteraction`](https://developer.apple.com/documentation/uikit/uiscrolledgeelementcontainerinteraction) (iOS 26+). 允许覆盖滚动视图边缘的视图自动影响滚动边缘效应形状.

在更古老的iOS版本和其他平台上,组件渲染为普通 `View`编号.

[https://github.com/user-attachments/assets/3c6e3ed1-b785-48cc-9d2e-63dfadb45ad2 互联网档案馆的存檔,存档日期2013-12-22](https://github.com/user-attachments/assets/3c6e3ed1-b785-48cc-9d2e-63dfadb45ad2)

## 安装

```sh
npm install @bsky.app/expo-scroll-edge-effect
```

然后运行 `npx pod-install` 连接本地模块.

> 要求数 [`expo`](https://docs.expo.dev/bare/installing-expo-modules/) 将配置到您的工程.

## 使用量

```tsx
import {
  ScrollEdgeEffectProvider,
  ScrollEdgeEffect,
  useScrollEdgeEffectRef,
} from "@bsky.app/expo-scroll-edge-effect";

function Screen() {
  return (
    <ScrollEdgeEffectProvider>
      <ScrollEdgeEffect edge="top">
        <MyHeader />
      </ScrollEdgeEffect>

      <ScrollContent />

      <ScrollEdgeEffect edge="bottom">
        <MyFooter />
      </ScrollEdgeEffect>
    </ScrollEdgeEffectProvider>
  );
}

function ScrollContent() {
  const scrollEdgeRef = useScrollEdgeEffectRef();

  return (
    <ScrollView ref={scrollEdgeRef}>
      {/* ... */}
    </ScrollView>
  );
}
```

### 与复苏

裁判回来了 `useScrollEdgeEffectRef` 是一个回调,所以它与 `mergeRefs`数字 :

```tsx
const animatedRef = useAnimatedRef();
const scrollEdgeRef = useScrollEdgeEffectRef();

<Animated.ScrollView ref={mergeRefs([animatedRef, scrollEdgeRef])} />
```

## API 密码

### `<ScrollEdgeEffectProvider>`

包装屏幕内容。 在上下文中保持滚动视图参考,以便 `<ScrollEdgeEffect>` 组件可以附加在它上.

### `useScrollEdgeEffectRef()`

返回回调回调 `ScrollView`。必须在 `<ScrollEdgeEffectProvider>`。 。 。 .

### `<ScrollEdgeEffect>`

环绕覆盖滚动视图边缘的内容。 在iOS 26+上,后人视图(标签,按钮,图像等)会自动影响卷轴边缘效应形状.

| Prop | 类型 | 说明 |
| --- | --- | --- |
| `edge` | `'top' | 'bottom' | 'left' | 'right'` | 哪个滚动视图边缘覆盖此内容 . |
| `effect` | `'automatic' | 'hard' | 'soft' | 'hidden'` | 边缘效果风格 。 默认为 `'automatic'`。 。 。 . `'hidden'` 完全禁用交互. |
| `fallbackStyle` | `ViewStyle` | 非iOS平台和iOS < 26. |
| `...viewProps` | `ViewProps` | 所有标准 View道具被转发. |

## 平台支持

| 平台 | 行为 |
| --- | --- |
| iOS 26+ (英语) | 土著 `UIScrollEdgeElementContainerInteraction` |
| iOS < 26 | 像平地一样 `View` (没有崩溃) |
| 机器人/网络 | 像平地一样 `View` |

## 许可证

麻省理工学院

## 常见问题

### @bsky\.app/expo-scroll-edge-effect 是什么？

用于 UIScrollEdElement 容器接口的 Expo 模块

### 如何安装 @bsky\.app/expo-scroll-edge-effect？

在项目目录运行 npm install @bsky\.app/expo-scroll-edge-effect，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：expo（\*）、react（\*）、react-native（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @bsky\.app/expo-scroll-edge-effect 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @bsky\.app/expo-scroll-edge-effect 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @bsky\.app/expo-scroll-edge-effect 可以商用吗？

@bsky\.app/expo-scroll-edge-effect 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @bsky\.app/expo-scroll-edge-effect 的下载量有多少？

根据 npm 官方下载统计，@bsky\.app/expo-scroll-edge-effect 在 2026/10/09 – 2026/11/07 这 30 天内被下载 322,266 次，日均约 10,742 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bsky\.app/expo-scroll-edge-effect 还在维护吗？

最新版本 0\.1\.11 发布于 2026/11/02（6 天前）；至今共发布 7 个版本，其中过去 12 个月发布了 7 个；首次发布于 2026/03/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。