@bsky.app/expo-scroll-edge-effect (英语)
展览模块包装 UIScrollEdgeElementContainerInteraction (iOS 26+). 允许覆盖滚动视图边缘的视图自动影响滚动边缘效应形状.
在更古老的iOS版本和其他平台上,组件渲染为普通 View编号.
安装
npm install @bsky.app/expo-scroll-edge-effect
然后运行 npx pod-install 连接本地模块.
要求数
expo将配置到您的工程.
使用量
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数字 :
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 |
许可证
麻省理工学院