PullToRefreshBox

用于下拉刷新交互的 Jetpack Compose PullToRefreshBox 组件。

Android

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~58.0.1

如需跨平台的支持下拉刷新的列表，请参阅 List — 在 Android 上基于 PullToRefreshBox 构建。

Expo UI PullToRefreshBox 与官方 Jetpack Compose PullToRefreshBox API 相匹配。它会包裹可滚动内容，并在下拉时显示刷新指示器。

PullToRefreshBox 在列表上方显示 Material 3 加载指示器

安装

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

用法

基本下拉刷新

将可滚动内容包裹在 PullToRefreshBox 中，即可添加下拉刷新行为。

BasicPullToRefresh.tsx

import { useState, useCallback } from 'react';
import {
  Host,
  PullToRefreshBox,
  LazyColumn,
  ListItem,
  Text,
} from '@expo/ui/jetpack-compose';

export default function BasicPullToRefresh() {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => {
      setRefreshing(false);
    }, 2000);
  }, []);

  return (
    <Host style={{ height: 400 }}>
      <PullToRefreshBox
        isRefreshing={refreshing}
        onRefresh={onRefresh}>
        <LazyColumn>
          <ListItem>
            <ListItem.HeadlineContent>
              <Text>Item 1</Text>
            </ListItem.HeadlineContent>
          </ListItem>
          <ListItem>
            <ListItem.HeadlineContent>
              <Text>Item 2</Text>
            </ListItem.HeadlineContent>
          </ListItem>
          <ListItem>
            <ListItem.HeadlineContent>
              <Text>Item 3</Text>
            </ListItem.HeadlineContent>
          </ListItem>
          <ListItem>
            <ListItem.HeadlineContent>
              <Text>Item 4</Text>
            </ListItem.HeadlineContent>
          </ListItem>
          <ListItem>
            <ListItem.HeadlineContent>
              <Text>Item 5</Text>
            </ListItem.HeadlineContent>
          </ListItem>
        </LazyColumn>
      </PullToRefreshBox>
    </Host>
  );
}

自定义指示器颜色

使用 indicator 属性自定义旋转指示器和容器的颜色。

CustomIndicatorColors.tsx

import { useState, useCallback } from 'react';
import {
  Host,
  PullToRefreshBox,
  LazyColumn,
  ListItem,
  Text,
} from '@expo/ui/jetpack-compose';

export default function CustomIndicatorColors() {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => {
      setRefreshing(false);
    }, 2000);
  }, []);

  return (
    <Host style={{ height: 400 }}>
      <PullToRefreshBox
        isRefreshing={refreshing}
        onRefresh={onRefresh}
        indicator={{ color: '#6200EE', containerColor: '#F5F5F5' }}>
        <LazyColumn>
          <ListItem>
            <ListItem.HeadlineContent>
              <Text>Item 1</Text>
            </ListItem.HeadlineContent>
          </ListItem>
          <ListItem>
            <ListItem.HeadlineContent>
              <Text>Item 2</Text>
            </ListItem.HeadlineContent>
          </ListItem>
          <ListItem>
            <ListItem.HeadlineContent>
              <Text>Item 3</Text>
            </ListItem.HeadlineContent>
          </ListItem>
        </LazyColumn>
      </PullToRefreshBox>
    </Host>
  );
}

API

import { PullToRefreshBox } from '@expo/ui/jetpack-compose';

Component

`PullToRefreshBox`

Android

Type: React.Element<PullToRefreshBoxProps>

A pull-to-refresh container that wraps scrollable content and shows a refresh indicator when pulled, matching Compose's PullToRefreshBox.

PullToRefreshBoxProps

`children`

Android

Type: ReactNode

The content to refresh.

`contentAlignment`

Android

Optional • Type: ContentAlignment • Default: 'topStart'

Alignment of children within the box.

`indicator`

Android

Optional • Type: PullToRefreshIndicatorProps

Configuration for the loading indicator shown during pull-to-refresh.

`isRefreshing`

Android

Optional • Type: boolean • Default: false

Whether the content is refreshing.

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`onRefresh`

Android

Optional • Type: () => void

Callback that is called when the user pulls to refresh.