This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 57).

LoadingIndicator

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

Android

Included in Expo Go

GitHub

npm

更新日志

Expo UI 加载指示器与官方 Jetpack Compose 加载指示器 API 保持一致。

安装

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.

用法

加载指示器

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

LoadingIndicatorExample.tsx

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

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

带容器的加载指示器

位于彩色背景中的加载指示器。

ContainedLoadingIndicatorExample.tsx

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

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

不确定模式

省略 progress 属性，以持续动画方式运行，而不指示具体完成进度。

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>
  );
}

确定模式

将 useNativeState 返回的可观察状态作为 progress 传入。将 progress.value 更新为 0 到 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