中文网
🌐 Nodejs.cn
首页指南EAS参考教程

SwiftUI

用于使用 @expo/ui 构建原生 iOS 界面的 SwiftUI 组件。

iOS
tvOS
Bundled version:
~0.2.0-beta.9

重要 此库当前处于测试版，可能会发生重大更改。 它在 Expo Go 应用中不可用——请使用 开发版本 进行尝试。

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

🌐 The SwiftUI components in @expo/ui/swift-ui allow you to build fully native iOS interfaces using SwiftUI from React Native.

安装

🌐 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

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

🌐 Using a component from @expo/ui/swift-ui requires wrapping it in a Host component. The Host is a container for SwiftUI views.

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

export function SaveButton() {
  return (
    <Host style={{ flex: 1 }}>
      <Button variant="default">Save changes</Button>
    </Host>
  );
}

有关 Host 工作原理的详细说明，请参见以下资源：

🌐 For an in-depth explanation of how Host works, see the following resources:

Expo UI Swift UI 指南

了解 @expo/ui/swift-ui的基础知识
Expo UI iOS 液态玻璃教程
Expo UI iOS 液态玻璃教程

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

组件

🌐 Components

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>Hello, world!</Text>
  </BottomSheet>
</Host>

See also: official SwiftUI documentation

按钮

🌐 Button

警告 无边框版本在 Apple TV 上不可用。

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

<Host style={{ flex: 1 }}>
  <Button
    variant="default"
    onPress={() => {
      setEditingProfile(true);
    }}>
    Edit profile
  </Button>
</Host>

See also: official SwiftUI documentation

CircularProgress

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

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

See also: official SwiftUI documentation

ColorPicker

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

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

<Host style={{ width: 400, height: 200 }}>
  <ColorPicker
    label="Select a color"
    selection={color}
    onValueChanged={setColor}
  />
</Host>

See also: official SwiftUI documentation

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')}>
        Hello
      </Button>
      <Button
        variant="bordered"
        systemImage="heart"
        onPress={() => console.log('Pressed2')}>
        Love it
      </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">
        Show Menu
      </Button>
    </ContextMenu.Trigger>
  </ContextMenu>
</Host>

See also: official SwiftUI documentation

DateTimePicker（日期）

🌐 DateTimePicker (date)

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

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

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

See also: official SwiftUI documentation

DateTimePicker (时间)

🌐 DateTimePicker (time)

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

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

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

See also: official SwiftUI documentation

仪表

🌐 Gauge

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

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>

See also: official SwiftUI documentation

主机

🌐 Host

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

🌐 A component that allows you to put the other @expo/ui/swift-ui components in React Native. It acts like <svg> for DOM, <Canvas> for react-native-skia, which underlying uses UIHostingController to render the SwiftUI views in UIKit.

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

🌐 Since the Host component is a React Native View, you can pass the style prop to it or matchContents prop to make the Host component match the contents' size.

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

function Example() {
  return (
    <Host matchContents>
      <Button
        onPress={() => {
          console.log('Pressed');
        }}>
        Click
      </Button>
    </Host>
  );
}
Host with flexbox and VStack
import { Button, Host, VStack, Text } from '@expo/ui/swift-ui';

function Example() {
  return (
    <Host style={{ flex: 1 }}>
      <VStack spacing={8}>
        <Text>Hello, world!</Text>
        <Button
          onPress={() => {
            console.log('Pressed');
          }}>
          Click
        </Button>
      </VStack>
    </Host>
  );
}

LinearProgress

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

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

See also: official SwiftUI documentation

列表

🌐 List

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

<Host style={{ flex: 1 }}>
  <List
    scrollEnabled={false}
    editModeEnabled={editModeEnabled}
    onSelectionChange={(items) => alert(`indexes of selected items: ${items.join(', ')}`)}
    moveEnabled={moveEnabled}
    onMoveItem={(from, to) => alert(`moved item at index ${from} to index ${to}`)}
    onDeleteItem={(item) => alert(`deleted item at index: ${item}`)}
    listStyle='automatic'
    deleteEnabled={deleteEnabled}
    selectEnabled={selectEnabled}>
    {data.map((item, index) => (
      <LabelPrimitive key={index} title={item.text} systemImage={item.systemImage} color={color} />
    ))}
  </List>
</Host>

See also: official SwiftUI documentation

选择器（分段）

🌐 Picker (segmented)

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

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

See also: official SwiftUI documentation

选择器（轮盘）

🌐 Picker (wheel)

警告 Apple TV 上不提供滚轮变体。

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

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

See also: official SwiftUI documentation

滑块

🌐 Slider

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

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

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

See also: official SwiftUI documentation

开关（切换）

🌐 Switch (toggle)

注意: 也称为 切换。

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

<Host matchContents>
  <Switch
    checked={checked}
    onValueChange={checked => {
      setChecked(checked);
    }}
    color="#ff0000"
    label="Play music"
    variant="switch"
  />
</Host>

See also: official SwiftUI documentation

开关（复选框）

🌐 Switch (checkbox)

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

<Host matchContents>
  <Switch
    checked={checked}
    onValueChange={checked => {
      setChecked(checked);
    }}
    label="Play music"
    variant="checkbox"
  />
</Host>

See also: official SwiftUI documentation

TextField

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

<Host matchContents>
  <TextField autocorrection={false} defaultValue="A single line text input" onChangeText={setValue} />
</Host>

See also: official SwiftUI documentation

更多

🌐 More

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

🌐 Expo UI is still in active development. We continue to add more functionality and may change the API. Some examples in the docs may not be up to date. If you want to see the latest changes, check the examples.

应用接口

🌐 API

完整的文档尚不可用。请使用 TypeScript 类型来探索 API。

🌐 Full documentation is not yet available. Use TypeScript types to explore the API.

// Import from the SwiftUI package
import { BottomSheet } from '@expo/ui/swift-ui';