在 App 开发中，嵌套滚动是一个很常见的需求。比如一个可纵向滚动的页面中有一个可横向滚动的列表，列表中的每一项又是一个可纵向滚动的列表。这种情况下，我们就需要用到嵌套滚动。 ![README-2023-04-18-17-43-21](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/53e3e6b1f7ea4963a1a2df3613f89aff~tplv-k3u1fbpfcp-zoom-1.image) 譬如下拉刷新，向下滑动时，如果还没到顶部，列表内容滚动，如果已经到达顶部，则列表自身移动。譬如 `BottomSheet`，向上滑动时，如果 `BottomSheet` 还没完全展开，则 `BottomSheet` 移动，如果已经完全展开，则 `BottomSheet` 里面的列表滚动。在 React Native，实现嵌套滚动非常不容易。通常有两种实现方式： 1. 借助 react-native-gesture-handler 和 reanimated 来实现。 2. 封装原生 UI 组件来实现。本文分享作者和他的伙伴们（以下也称作**我们**）通过封装原生 UI 组件来实现嵌套滚动的成果。因为一共有三个组件，在 Andriod 都是通过 [NestedScrolling API](https://developer.android.com/reference/androidx/core/view/NestedScrollingChild) 来实现的，并且可以配合使用，所以我们将这三个组件称作**嵌套滚动三件套**。 ## NestedScrollView [NestedScrollView](https://github.com/sdcxtech/react-native-troika/blob/master/packages/nested-scroll/README.md) 用于实现题图的效果。 | | | | --------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | |

| ### 安装 ```sh yarn add @sdcx/nested-scroll ``` ### 使用 `NestedScrollView` 在使用上比较简单，将可滚动列表作为子组件放入 `NestedScrollView` 即可，如下： ```tsx import { NestedScrollView, NestedScrollViewHeader } from '@sdcx/nested-scroll' const App = () => { return ( ) } ``` > 注意为可滚动列表开启 [nestedScrollEnabled](https://reactnative.dev/docs/scrollview#nestedscrollenabled-android) 属性 `NestedScrollView` 和 `NestedScrollViewHeader` 都只有两三个属性，使用起来非常简单。想要 sticky header 效果，可以配置 `NestedScrollViewHeader` 如下两个属性之一： - `stickyHeaderBeginIndex`，它表示从第几个子组件开始，子组件将会被固定在顶部。 - `stickyHeight`，它表示 header 多高的区域将会被固定在顶部，优先级高于 `stickyHeaderBeginIndex`。 ## PullToRefresh React Native 内置的下拉刷新组件比较简陋，且 iOS 和 Android 平台的表现很不一致。幸运的是，它提供了一个 `refreshControl` 属性，可以用来自定义下拉刷新组件。我们封装了一个原生组件 -- [PullToRefresh](https://github.com/sdcxtech/react-native-troika/blob/master/packages/pull-to-refresh/README.md)，用来提供自定义下拉刷新的能力。可以实现如下效果： | | | | --------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | |

| ### 安装 ```sh yarn add @sdcx/pull-to-refresh ``` ### 使用 `PullToRefresh` 在使用上主要有以下几个步骤： > 注意为可滚动列表开启 [nestedScrollEnabled](https://reactnative.dev/docs/scrollview#nestedscrollenabled-android) 属性 1. 使用 PullToRefresh 提供的 `RefreshControl` 组件设置 `refreshControl` 属性，并传递 `refreshing` 和 `onRefresh` 属性。 ```tsx import { RefreshControl } from '@sdcx/pull-to-refresh' function App() { const [refreshing, setRefreshing] = useState(false) return ( { setRefreshing(true) setTimeout(() => { setRefreshing(false) }, 2000) }} /> } /> ) } ``` 2. PullToRefresh 提供的默认下拉刷新样式并不适用于你的 App，你需要自定义下拉刷新样式。参考下面的例子即可： ```tsx import { PullToRefreshHeader, PullToRefreshHeaderProps, PullToRefreshOffsetChangedEvent, PullToRefreshStateChangedEvent, PullToRefreshState, PullToRefreshStateIdle, PullToRefreshStateRefreshing, } from '@sdcx/pull-to-refresh' function LottiePullToRefreshHeader(props: PullToRefreshHeaderProps) { const [progress, setProgress] = useState(0) const lottieRef = useRef(null) const stateRef = useRef(PullToRefreshStateIdle) const onOffsetChanged = useCallback( (event: PullToRefreshOffsetChangedEvent) => { const offset = event.nativeEvent.offset if (stateRef.current !== PullToRefreshStateRefreshing) { setProgress(Math.min(1, offset / 50)) } }, [] ) const onStateChanged = useCallback( (event: PullToRefreshStateChangedEvent) => { const state = event.nativeEvent.state stateRef.current = state if (state === PullToRefreshStateIdle) { lottieRef.current?.reset() setProgress(0) } else if (state === PullToRefreshStateRefreshing) { lottieRef.current?.play(progress) } else { HapticFeedback.trigger('impactLight') } }, [progress] ) return ( ) } ``` 3. 设置你自定义的下拉刷新样式为默认样式。通常是在 APP 启动时设置： ```tsx // index.js import { PullToRefresh } from '@sdcx/pull-to-refresh' import { LottiePullToRefreshHeader } from './LottiePullToRefreshHeader' PullToRefresh.setDefaultHeader(LottiePullToRefreshHeader) ``` 此外，PullToRefresh 还支持上拉加载更多，使用方法和下拉刷新类似，具体参考[它的文档](https://github.com/sdcxtech/react-native-troika/blob/master/packages/pull-to-refresh/README.md)。 ## BottomSheet [BottomSheet](https://github.com/sdcxtech/react-native-troika/blob/master/packages/bottom-sheet/README.md) 是一个类似于 Android 原生的 [BottomSheetBehavior](https://developer.android.com/reference/com/google/android/material/bottomsheet/BottomSheetBehavior) 组件，我们在 API 设计上也尽量和 Android 原生保持一致。可以实现如下效果： | | | | --------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | |

| ### 安装 ```sh yarn add @sdcx/bottom-sheet ``` ### 使用 `BottomSheet` 在使用上是非常简单的，没什么心智负担。 ```tsx import BottomSheet from '@sdcx/bottom-sheet' const App = () => { return ( ... { // 在这里放置你的内容，可以是任何组件，如： } ) } ``` > 注意为可滚动列表开启 [nestedScrollEnabled](https://reactnative.dev/docs/scrollview#nestedscrollenabled-android) 属性如果你熟悉原生 Android 开发，那么对 `BottomSheet` 的 API 并不陌生。 #### 属性 - `peekHeight`, 是指 BottomSheet 收起时，在屏幕上露出的高度，默认是 200。 - `state`, 是指 BottomSheet 的状态，有三种状态： - `'collapsed'`，收起状态，此时 BottomSheet 的高度为 `peekHeight`。 - `'expanded'`，展开状态，此时 BottomSheet 的高度为父组件的高度或内容的高度，参考 `fitToContents` 属性。 - `'hidden'`，隐藏状态，此时 BottomSheet 的高度为 0。 - `fitToContents`，是指 BottomSheet 在展开时，是否适应内容的高度，默认是 `false`。 #### 回调 - `onStateChanged`, 是指 BottomSheet 状态变化时的回调，它和 `state` 属性是一对，用来实现受控模式。 ```tsx export type BottomSheetState = 'collapsed' | 'expanded' | 'hidden' export interface StateChangedEventData { state: BottomSheetState } interface NativeBottomSheetProps extends ViewProps { onStateChanged?: ( event: NativeSyntheticEvent ) => void } ``` - `onSlide`, 是指 BottomSheet 滑动时的回调，可以用它来实现一些动画效果。 ```tsx export interface OffsetChangedEventData { progress: number // 是指 BottomSheet 滑动的进度，范围是 0 到 1 offset: number // 是指 BottomSheet 滑动的距离，范围是 0 到 BottomSheet 的高度 expandedOffset: number // 是指 BottomSheet 展开时的 `offset` collapsedOffset: number // 是指 BottomSheet 收起时的 `offset` } interface NativeBottomSheetProps extends ViewProps { onSlide?: (event: NativeSyntheticEvent) => void } ``` ## 源码希望我们的经验对你有所帮助，如果你对我们的[源码](https://github.com/sdcxtech/react-native-troika)感兴趣，记得给颗星星哦。