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

表单

一个用于以结构化布局收集用户输入的 SwiftUI 表单组件。

iOS

tvOS

Included in Expo Go

GitHub

npm

更新日志

Expo UI Form 与官方 SwiftUI Form 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.

用法

基础表单

BasicFormExample.tsx

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

export default function BasicFormExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Form>
        <TextField placeholder="输入你的名字" />
      </Form>
    </Host>
  );
}

带分区的表单

使用 Section 组件在表单内对相关控件进行分组。

FormWithSectionsExample.tsx

import { useState } from 'react';
import {
  Host,
  Form,
  Section,
  TextField,
  Toggle,
  Button,
} from '@expo/ui/swift-ui';

export default function FormWithSectionsExample() {
  const [notifications, setNotifications] = useState(false);
  const [darkMode, setDarkMode] = useState(false);

  return (
    <Host style={{ flex: 1 }}>
      <Form>
        <Section title="个人资料">
          <TextField placeholder="姓名" />
          <TextField placeholder="电子邮件" />
        </Section>

        <Section title="偏好设置">
          <Toggle
            label="启用通知"
            isOn={notifications}
            onIsOnChange={setNotifications}
          />
          <Toggle
            label="深色模式"
            isOn={darkMode}
            onIsOnChange={setDarkMode}
          />
        </Section>

        <Section>
          <Button
            label="保存更改"
            onPress={() => console.log('Saved!')}
          />
        </Section>
      </Form>
    </Host>
  );
}

带自定义背景的表单

使用 scrollContentBackground 修饰器来自定义或隐藏表单的背景。

FormBackgroundExample.tsx

import { Host, Form, Section, TextField } from '@expo/ui/swift-ui';
import {
  scrollContentBackground,
  background,
} from '@expo/ui/swift-ui/modifiers';

export default function FormBackgroundExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Form
        modifiers={[
          scrollContentBackground('hidden'),
          background('#F0F0F0'),
        ]}>
        <Section title="自定义背景">
          <TextField placeholder="输入文本" />
        </Section>
      </Form>
    </Host>
  );
}

不可滚动的表单

使用 scrollDisabled 修饰器来阻止表单滚动。

注意： scrollDisabled 修饰器仅适用于 iOS 16+ 和 tvOS 16+。

NonScrollableFormExample.tsx

import { useState } from 'react';
import {
  Host,
  Form,
  Section,
  TextField,
  Toggle,
} from '@expo/ui/swift-ui';
import { scrollDisabled } from '@expo/ui/swift-ui/modifiers';

export default function NonScrollableFormExample() {
  const [isOn, setIsOn] = useState(false);

  return (
    <Host style={{ flex: 1 }}>
      <Form modifiers={[scrollDisabled()]}>
        <Section title="设置">
          <Toggle
            label="启用功能"
            isOn={isOn}
            onIsOnChange={setIsOn}
          />
        </Section>
      </Form>
    </Host>
  );
}

下拉刷新表单

使用 refreshable 修饰器添加下拉刷新功能。

RefreshableFormExample.tsx

import { useState, useCallback } from 'react';
import { Host, Form, Section, Text } from '@expo/ui/swift-ui';
import { refreshable } from '@expo/ui/swift-ui/modifiers';

export default function RefreshableFormExample() {
  const [lastRefresh, setLastRefresh] = useState(new Date());

  const handleRefresh = useCallback(async () => {
    // 模拟网络请求
    await new Promise(resolve => setTimeout(resolve, 1500));
    setLastRefresh(new Date());
  }, []);

  return (
    <Host style={{ flex: 1 }}>
      <Form modifiers={[refreshable(handleRefresh)]}>
        <Section title="下拉刷新">
          <Text>
            上次刷新时间：{lastRefresh.toLocaleTimeString()}
          </Text>
        </Section>
      </Form>
    </Host>
  );
}

API

import { Form } from '@expo/ui/swift-ui';

Component

`Form`

iOS

tvOS

Type: React.Element<FormProps>

FormProps

`children`

iOS

tvOS

Type: ReactNode

The content of the form.

Inherited props

CommonViewModifierProps