Jetpack Compose

使用 @expo/ui 构建原生 Android 界面的 Jetpack Compose 组件

Android

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~58.0.1

@expo/ui/jetpack-compose 中的 Jetpack Compose 组件让你可以通过 React Native 使用 Jetpack Compose 构建完全原生的 Android 界面

安装

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.

使用方法

使用 @expo/ui/jetpack-compose 中的组件时，需要将其包装在 Host 组件中。Host 是 Jetpack Compose 视图的容器

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

export function SaveButton() {
  return (
    <Host matchContents>
      <Button onClick={() => alert('Saved!')}>Save changes</Button>
    </Host>
  );
}

通过 Jetpack Compose 扩展

创建可与 Expo UI 集成的自定义 Jetpack Compose 组件和修饰符。

可用组件

示例

修饰符

修饰符通过 modifiers 属性按数组顺序应用。将 background 放在 paddingAll 前面，这样内边距就会位于背景内侧，而不是外侧

ComposeModifiersExample.tsx

import { Column, Host, Text } from '@expo/ui/jetpack-compose';
import {
  background,
  border,
  fillMaxWidth,
  paddingAll,
  shadow,
} from '@expo/ui/jetpack-compose/modifiers';

export default function ComposeModifiersExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Column
        verticalArrangement={{ spacedBy: 16 }}
        modifiers={[paddingAll(16)]}>
        <Text
          color="#FFFFFF"
          modifiers={[
            fillMaxWidth(),
            shadow(4),
            background('#6750A4'),
            paddingAll(16),
          ]}>
          背景、阴影和内边距
        </Text>
        <Text
          color="#1D192B"
          modifiers={[
            fillMaxWidth(),
            background('#E8DEF8'),
            border(2, '#6750A4'),
            paddingAll(16),
          ]}>
          背景、边框和内边距
        </Text>
      </Column>
    </Host>
  );
}

设置界面

将 ListItem 插槽与 Switch 和 Icon 组合，构建 Material 3 设置界面

ComposeSettingsScreenExample.tsx

import {
  Column,
  Host,
  Icon,
  ListItem,
  Switch,
  Text,
  useMaterialColors,
} from '@expo/ui/jetpack-compose';
import ChevronRight from '@expo/material-symbols/chevron_right.xml';
import Flight from '@expo/material-symbols/flight.xml';
import Wifi from '@expo/material-symbols/wifi.xml';
import { useState } from 'react';

export default function ComposeSettingsScreenExample() {
  const [airplaneMode, setAirplaneMode] = useState(true);
  const colors = useMaterialColors();

  return (
    <Host style={{ flex: 1 }}>
      <Column>
        <ListItem>
          <ListItem.LeadingContent>
            <Icon
              source={Flight}
              tint={colors.onSurfaceVariant}
              contentDescription="Airplane mode"
            />
          </ListItem.LeadingContent>
          <ListItem.HeadlineContent>
            <Text>Airplane mode</Text>
          </ListItem.HeadlineContent>
          <ListItem.TrailingContent>
            <Switch
              value={airplaneMode}
              onCheckedChange={setAirplaneMode}
            />
          </ListItem.TrailingContent>
        </ListItem>
        <ListItem>
          <ListItem.LeadingContent>
            <Icon
              source={Wifi}
              tint={colors.onSurfaceVariant}
              contentDescription="Wi-Fi"
            />
          </ListItem.LeadingContent>
          <ListItem.HeadlineContent>
            <Text>Wi-Fi</Text>
          </ListItem.HeadlineContent>
          <ListItem.SupportingContent>
            <Text>Expo Guest</Text>
          </ListItem.SupportingContent>
          <ListItem.TrailingContent>
            <Icon
              source={ChevronRight}
              tint={colors.onSurfaceVariant}
              contentDescription="Open"
            />
          </ListItem.TrailingContent>
        </ListItem>
      </Column>
    </Host>
  );
}

亮度行

亮度或音量控件的一种常见模式是在 Slider 两侧放置图标。为 Slider 添加 weight 修饰符，使其占据图标之间剩余的空间

ComposeBrightnessRowExample.tsx

import {
  Host,
  Icon,
  Row,
  Slider,
  useMaterialColors,
} from '@expo/ui/jetpack-compose';
import {
  paddingAll,
  weight,
} from '@expo/ui/jetpack-compose/modifiers';
import BacklightHigh from '@expo/material-symbols/backlight_high.xml';
import BacklightLow from '@expo/material-symbols/backlight_low.xml';
import { useState } from 'react';

export default function ComposeBrightnessRowExample() {
  const [brightness, setBrightness] = useState(0.5);
  const colors = useMaterialColors();

  return (
    <Host style={{ flex: 1 }}>
      <Row
        verticalAlignment="center"
        horizontalArrangement={{ spacedBy: 12 }}
        modifiers={[paddingAll(16)]}>
        <Icon
          source={BacklightLow}
          tint={colors.onSurfaceVariant}
          contentDescription="Dimmer"
        />
        <Slider
          value={brightness}
          onValueChange={setBrightness}
          modifiers={[weight(1)]}
        />
        <Icon
          source={BacklightHigh}
          tint={colors.onSurfaceVariant}
          contentDescription="Brighter"
        />
      </Row>
    </Host>
  );
}

次要文本

使用 ListItem.SupportingContent 显示第二行内容，并使用 useMaterialColors 获取随浅色和深色主题变化的文本颜色

ComposeSecondaryTextExample.tsx

import {
  Column,
  Host,
  ListItem,
  Text,
  useMaterialColors,
} from '@expo/ui/jetpack-compose';

export default function ComposeSecondaryTextExample() {
  const colors = useMaterialColors();

  return (
    <Host style={{ flex: 1 }}>
      <Column>
        <ListItem>
          <ListItem.HeadlineContent>
            <Text>Chrome</Text>
          </ListItem.HeadlineContent>
          <ListItem.SupportingContent>
            <Text color={colors.onSurfaceVariant}>
              Last used: Today
            </Text>
          </ListItem.SupportingContent>
          <ListItem.TrailingContent>
            <Text color={colors.onSurfaceVariant}>1.57 GB</Text>
          </ListItem.TrailingContent>
        </ListItem>
      </Column>
    </Host>
  );
}