Expo 中文文档

Blog Changelog Star us on GitHub

首页指南 EAS Reference Learn

Reference version

存档 Expo Snack Discord and forums 新闻邮件

title: SwiftUI sidebar_title: SwiftUI description: 使用 @expo/ui 构建原生 iOS 界面的 SwiftUI 组件。 sourceCodeUrl: 'https://github.com/expo/expo/tree/main/packages/expo-ui' packageName: '@expo/ui' platforms: ['ios', 'tvos'] isBeta: true hasVideoLink: true ---。

> 重要此库目前处于测试阶段，可能会有破坏性更改。它在 Expo Go 应用中不可用——请使用开发构建来试用。

@expo/ui/swift-ui 中的 SwiftUI 组件允许你使用 React Native 通过 SwiftUI 构建完全原生的 iOS 界面。

安装

Terminal

- npx expo install

- yarn expo install

- pnpm expo install

- bun expo install

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

用法

使用 @expo/ui/swift-ui 中的组件需要将其包装在 Host 组件中。Host 是 SwiftUI 视图的容器。

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

export function SaveButton() {
  return (
    <Host style={{ flex: 1 }}>
      <Button variant="default">保存更改</Button>
    </Host>
  );
}

有关 Host 工作原理的深入说明，请参阅以下资源：

Expo UI Swift UI 指南

了解 @expo/ui/swift-ui 的基础知识

Expo UI iOS Liquid Glass 教程

Expo UI iOS Liquid Glass 教程

了解如何使用新的 Expo UI 在你的 React Native 应用中构建真正的 SwiftUI 视图。

组件

BottomSheet

iOS 上的 BottomSheet 组件。

import { BottomSheet, Host, Text } from '@expo/ui/swift-ui';
import { useWindowDimensions } from 'react-native';

const { width } = useWindowDimensions();

<Host style={{ position: 'absolute', width }}>
  <BottomSheet isOpened={isOpened} onIsOpenedChange={e => setIsOpened(e)}>
    <Text>你好，世界！</Text>
  </BottomSheet>
</Host>

另见：官方 SwiftUI 文档

按钮

> 警告无边框变体在 Apple TV 上不可用。

iOS 上的 Button 组件。

iOS 上的 Button 组件。

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

<Host style={{ flex: 1 }}>
  <Button
    variant="default"
    onPress={() => {
      setEditingProfile(true);
    }}>
    编辑个人资料
  </Button>
</Host>

另见：官方 SwiftUI 文档

CircularProgress

iOS 上的 CircularProgress 组件。

import { CircularProgress, Host } from '@expo/ui/swift-ui';

<Host style={{ width: 300 }}>
  <CircularProgress progress={0.5} color="blue" />
</Host>

另见：官方 SwiftUI 文档

ColorPicker

> 警告此组件在 Apple TV 上不可用。

iOS 上的 ColorPicker 组件。

iOS 上的 ColorPicker 组件。

import { ColorPicker, Host } from '@expo/ui/swift-ui';

<Host style={{ width: 400, height: 200 }}>
  <ColorPicker
    label="选择一种颜色"
    selection={color}
    onValueChanged={setColor}
  />
</Host>

另见：官方 SwiftUI 文档

ContextMenu

> 注意：也称为 DropdownMenu。

iOS 上的 ContextMenu 组件。

import { ContextMenu, Host } from '@expo/ui/swift-ui';

<Host style={{ width: 150, height: 50 }}>
  <ContextMenu>
    <ContextMenu.Items>
      <Button
        systemImage="person.crop.circle.badge.xmark"
        onPress={() => console.log('Pressed1')}>
        你好
      </Button>
      <Button
        variant="bordered"
        systemImage="heart"
        onPress={() => console.log('Pressed2')}>
        喜欢它
      </Button>
      <Picker
        label="Doggos"
        options={['very', 'veery', 'veeery', 'much']}
        variant="menu"
        selectedIndex={selectedIndex}
        onOptionSelected={({ nativeEvent: { index } }) => setSelectedIndex(index)}
      />
    </ContextMenu.Items>
    <ContextMenu.Trigger>
      <Button variant="bordered">
        显示菜单
      </Button>
    </ContextMenu.Trigger>
  </ContextMenu>
</Host>

另见：官方 SwiftUI 文档

DateTimePicker（日期）

> 警告此组件在 Apple TV 上不可用。

iOS 上的 DateTimePicker（日期）组件。

import { DateTimePicker, Host } from '@expo/ui/swift-ui';

<Host matchContents>
  <DateTimePicker
    onDateSelected={date => {
      setSelectedDate(date);
    }}
    displayedComponents='date'
    initialDate={selectedDate.toISOString()}
    variant='wheel'
  />
</Host>

另见：官方 SwiftUI 文档

DateTimePicker（时间）

> 警告此组件在 Apple TV 上不可用。

iOS 上的 DateTimePicker（时间）组件。

import { DateTimePicker, Host } from '@expo/ui/swift-ui';

<Host matchContents>
  <DateTimePicker
    onDateSelected={date => {
      setSelectedDate(date);
    }}
    displayedComponents='hourAndMinute'
    initialDate={selectedDate.toISOString()}
    variant='wheel'
  />
</Host>

另见：官方 SwiftUI 文档

仪表盘

> 警告此组件在 Apple TV 上不可用。

iOS 上的仪表盘组件。

iOS 上的仪表盘组件。

import { Gauge, Host } from "@expo/ui/swift-ui";

<Host matchContents>
  <Gauge
    max={{ value: 1, label: '1' }}
    min={{ value: 0, label: '0' }}
    current={{ value: 0.5 }}
    color={[
      PlatformColor('systemRed'),
      PlatformColor('systemOrange'),
      PlatformColor('systemYellow'),
      PlatformColor('systemGreen'),
    ]}
    type="circularCapacity"
  />
</Host>

另见：官方 SwiftUI 文档

Host

一个组件，允许你将其他 @expo/ui/swift-ui 组件放入 React Native 中。它在 DOM 中的作用类似于 <svg>，在 react-native-skia 中的作用类似于 <Canvas>，其内部使用 UIHostingController 在 UIKit 中渲染 SwiftUI 视图。

由于 Host 组件是一个 React Native View，你可以向其传入 style 属性，或者传入 matchContents 属性，使 Host 组件匹配内容的大小。

包裹在 Host 中的 Button

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

function Example() {
  return (
    <Host matchContents>
      <Button
        onPress={() => {
          console.log('Pressed');
        }}>
        点击
      </Button>
    </Host>
  );
}

使用 flexbox 和 VStack 的 Host

import { Button, Host, VStack, Text } from '@expo/ui/swift-ui';

function Example() {
  return (
    <Host style={{ flex: 1 }}>
      <VStack spacing={8}>
        <Text>你好，世界！</Text>
        <Button
          onPress={() => {
            console.log('Pressed');
          }}>
          点击
        </Button>
      </VStack>
    </Host>
  );
}

LinearProgress

iOS 上的 LinearProgress 组件。

import { LinearProgress, Host } from '@expo/ui/swift-ui';

<Host style={{ width: 300 }}>
  <LinearProgress progress={0.5} color="red" />
</Host>

另见：官方 SwiftUI 文档

列表

iOS 上的列表组件。

iOS 上的列表组件。

import { Host, List } from '@expo/ui/swift-ui';

<Host style={{ flex: 1 }}>
  <List
    scrollEnabled={false}
    editModeEnabled={editModeEnabled}
    onSelectionChange={(items) => alert(`已选择项目的索引：${items.join(', ')}`)}
    moveEnabled={moveEnabled}
    onMoveItem={(from, to) => alert(`已将索引 ${from} 处的项目移动到索引 ${to}`)}
    onDeleteItem={(item) => alert(`已删除索引为 ${item} 的项目`)}
    listStyle='automatic'
    deleteEnabled={deleteEnabled}
    selectEnabled={selectEnabled}>
    {data.map((item, index) => (
      <LabelPrimitive key={index} title={item.text} systemImage={item.systemImage} color={color} />
    ))}
  </List>
</Host>

另见：官方 SwiftUI 文档

Picker（分段式）

iOS 上的 Picker 组件。

import { Host, Picker } from '@expo/ui/swift-ui';

<Host matchContents>
  <Picker
    options={['$', '$$', '$$$', '$$$$']}
    selectedIndex={selectedIndex}
    onOptionSelected={({ nativeEvent: { index } }) => {
      setSelectedIndex(index);
    }}
    variant="segmented"
  />
</Host>

另见：官方 SwiftUI 文档

选择器（滚轮）

> 警告轮盘变体在 Apple TV 上不可用。

iOS 上的 Picker 组件。

import { Host, Picker } from '@expo/ui/swift-ui';

<Host style={{ height: 100 }}>
  <Picker
    options={['$', '$$', '$$$', '$$$$']}
    selectedIndex={selectedIndex}
    onOptionSelected={({ nativeEvent: { index } }) => {
      setSelectedIndex(index);
    }}
    variant="wheel"
  />
</Host>

另见：官方 SwiftUI 文档

滑块

> 警告此组件在 Apple TV 上不可用。

iOS 上的滑块组件。

iOS 上的滑块组件。

import { Host, Slider } from '@expo/ui/swift-ui';

<Host style={{ minHeight: 60 }}>
  <Slider
    value={value}
    onValueChange={(value) => {
      setValue(value);
    }}
  />
</Host>

另见：官方 SwiftUI 文档

开关（切换）

> 注意：也称为切换。

iOS 上的 Switch 组件。

import { Host, Switch } from '@expo/ui/swift-ui';

<Host matchContents>
  <Switch
    value={checked}
    onValueChange={checked => {
      setChecked(checked);
    }}
    color="#ff0000"
    label="播放音乐"
    variant="switch"
  />
</Host>

另见：官方 SwiftUI 文档

开关（复选框）

iOS 上的 Picker 组件。

import { Host, Switch } from '@expo/ui/swift-ui';

<Host matchContents>
  <Switch
    value={checked}
    onValueChange={checked => {
      setChecked(checked);
    }}
    label="播放音乐"
    variant="checkbox"
  />
</Host>

另见：官方 SwiftUI 文档

TextField

iOS 上的 TextField 组件。

import { Host, TextField } from '@expo/ui/swift-ui';

<Host matchContents>
  <TextField autocorrection={false} defaultValue="单行文本输入" onChangeText={setValue} />
</Host>

另见：官方 SwiftUI 文档

更多

Expo UI 仍在积极开发中。我们会持续添加更多功能，并且可能会更改 API。文档中的一些示例可能并非最新。如果你想查看最新更改，请查看示例。

API

完整文档尚未提供。请使用 TypeScript 类型来探索该 API。

// 从 SwiftUI 包中导入
import { BottomSheet } from '@expo/ui/swift-ui';