@sdcx/nested-scroll
v1.0.6TypeScript
A react-native NestedScrollView component.
0/weekUpdated 2 days agoMITUnpacked: 74.7 KB
Published by sdcx
npm install @sdcx/nested-scrollNestedScrollView
NestedScrollView 是一个 React Native 原生 UI 组件。
主要用来实现如下结构的视图：
最外层是一个可纵向滚动的视图， 也就是我们的 NestedScrollView， 它的子组件往往由一个头部和一个可横向滚动的视图组成。
这个可横向滚动的视图在 React Native 中通常是设置了 horizontal 属性的 ScrollView，也可以是 PagerView。
最里层是若干也可以纵向滚动的视图，譬如 ScrollView、FlashList、WebView 等等。
NestedScrollView 的作用是协调最里层和最外层可滚动视图之间的（纵向）滚动，使得滚动体验更加流畅。
| | |
| ------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| 
| 
|
版本兼容
| 版本 | RN 版本 | RN 架构 |
| ---- | ------- | ------- |
| 0.x | < 0.82 | 旧架构 |
| 1.x | >= 0.82 | 新架构 |
Installation
``sh`
yarn add @sdcx/nested-scroll&
pod install
Usage
NestedScrollView 在使用上比较简单
`tsx
import { NestedScrollView, NestedScrollViewHeader } from '@sdcx/nested-scroll';
const App = () => {
return (
);
};
`
> :exclamation: :exclamation: :exclamation:
> Android 是基于 NestedScrolling API 实现的。
>
>
请记得为你的列表开启 nestedScrollEnabled 属性。
>
> :exclamation: :exclamation: :exclamation:
API
$3
NestedScrollView 只有两个属于自己的属性
- bounces：仅限于 iOS 平台，用于设置 NestedScrollView 是否有弹性，默认为 false。一旦设置为 true，最内层可滚动视图将失去弹性。
- contentContainerStyle：仅限于 Android 平台，用于设置 NestedScrollView 的 contentView 的样式。
$3
- stickyHeaderBeginIndex，它表示从第几个子组件开始，子组件将会被固定在顶部。
- stickyHeaderHeight，它表示 header 多高的区域将会被固定在顶部，优先级高于 stickyHeaderBeginIndex。
- onScroll， 是一个回调函数，可用于实现头部视图的视差效果。
`ts``
type OnScroll = (event: {
nativeEvent: {
contentOffset: {
x: number;
y: number;
};
};
}) => void;