LoadingIndicator

用于显示加载状态的 Jetpack Compose 加载指示器组件。

Android

Included in Expo Go

Recommended version:

~57.0.22

Expo UI 加载指示器与官方 Jetpack Compose 加载指示器 API 匹配。

🌐 Expo UI Loading Indicators match the official Jetpack Compose Loading Indicator API.

Default and contained loading indicators in indeterminate mode

安装

🌐 Installation

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.

用法

🌐 Usage

加载指示器

🌐 Loading indicator

来自 Material 3 Expressive 的变形形状加载动画。

🌐 A morphing-shape loading animation from Material 3 Expressive.

LoadingIndicatorExample.tsx

import { Host, LoadingIndicator } from '@expo/ui/jetpack-compose';

export default function LoadingIndicatorExample() {
  return (
    <Host matchContents>
      <LoadingIndicator />
    </Host>
  );
}

包含加载指示器

🌐 Contained loading indicator

带有彩色背景的加载指示器。

🌐 A loading indicator inside a colored background.

ContainedLoadingIndicatorExample.tsx

import {
  Host,
  ContainedLoadingIndicator,
} from '@expo/ui/jetpack-compose';

export default function ContainedLoadingIndicatorExample() {
  return (
    <Host matchContents>
      <ContainedLoadingIndicator />
    </Host>
  );
}

不确定

🌐 Indeterminate

省略 progress 属性以实现连续动画，而不指示特定的完成度。

🌐 Omit the progress prop to animate continuously without indicating a specific completion level.

IndeterminateExample.tsx

import {
  ContainedLoadingIndicator,
  Host,
  LoadingIndicator,
  Row,
} from '@expo/ui/jetpack-compose';

export default function IndeterminateExample() {
  return (
    <Host matchContents>
      <Row horizontalArrangement={{ spacedBy: 16 }}>
        <LoadingIndicator />
        <ContainedLoadingIndicator />
      </Row>
    </Host>
  );
}

确定的

🌐 Determinate

将 useNativeState 的可观察状态作为 progress 传递。在 0 和 1 之间更新 progress.value。

🌐 Pass an observable state from useNativeState as progress. Update progress.value between 0 and 1.

DeterminateExample.tsx

import {
  ContainedLoadingIndicator,
  Host,
  LoadingIndicator,
  Row,
  useNativeState,
} from '@expo/ui/jetpack-compose';
import { useEffect } from 'react';

export default function DeterminateExample() {
  const progress = useNativeState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      progress.value = (progress.value + 0.05) % 1;
    }, 500);
    return () => clearInterval(interval);
  }, [progress]);

  return (
    <Host matchContents>
      <Row horizontalArrangement={{ spacedBy: 16 }}>
        <LoadingIndicator progress={progress} />
        <ContainedLoadingIndicator progress={progress} />
      </Row>
    </Host>
  );
}

应用接口

🌐 API

import {
  LoadingIndicator,
  ContainedLoadingIndicator,
} from '@expo/ui/jetpack-compose';

Components

`ContainedLoadingIndicator`

Android

Type: React.Element<ComponentType<ContainedLoadingIndicatorProps>>

A loading indicator that displays loading using morphing shapes inside a container.

Matches the Jetpack Compose ContainedLoadingIndicator.

Common props shared by loading indicator variants.

ContainedLoadingIndicatorProps

`containerColor`

Android

Optional • Type: ColorValue

Loading indicator's container color

Inherited props

LoadingIndicatorCommonConfig