PullToRefreshBox

一个用于下拉刷新的 Jetpack Compose PullToRefreshBox 组件。

Android

Bundled version:

~55.0.2

一个下拉刷新容器，封装可滚动内容，并在下拉时提供标准的刷新指示器。有关更多信息，请参阅官方 Jetpack Compose 文档。

🌐 A pull-to-refresh container that wraps scrollable content and provides a standard refresh indicator when pulled. See the official Jetpack Compose documentation for more information.

安装

🌐 Installation

Terminal

- npx expo install @expo/ui

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

用法

🌐 Usage

基础下拉刷新

🌐 Basic pull to refresh

BasicPullToRefresh.tsx

import { useState, useCallback } from 'react';
import { Host, PullToRefreshBox, LazyColumn, ListItem } 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 headline="Item 1" />
          <ListItem headline="Item 2" />
          <ListItem headline="Item 3" />
          <ListItem headline="Item 4" />
          <ListItem headline="Item 5" />
        </LazyColumn>
      </PullToRefreshBox>
    </Host>
  );
}

应用接口

🌐 API

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

Component

`PullToRefreshBox`

Android

Type: React.Element<PullToRefreshBoxProps>

Renders a PullToRefreshBox component. A box that allows the user to pull down to refresh the content.

PullToRefreshBoxProps

`children`

Android

Type: React.ReactNode

The content to refresh.

`isRefreshing`

Android

Optional • Type: boolean • Default: false

Whether the content is refreshing.

`loadingIndicatorModifiers`

Android

Optional • Type: ExpoModifier[] • Default: [align('topCenter'), padding(0, 10, 0, 0)]

Modifiers for the loading indicator.

`modifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the component.

`onRefresh`

Android

Optional • Type: () => void

Callback to call when the content is refreshed.