Expo UI

一组组件，允许你直接使用 SwiftUI 和 Jetpack Compose 从 React 构建 UI。

Android

iOS

Bundled version:

~0.1.1-alpha.7

此库目前处于 alpha 测试阶段，可能会经常发生重大更改。Expo Go 应用中暂不支持此功能 - 请使用开发构建进行试用。

@expo/ui 是一组原生输入组件，可让你使用 SwiftUI 和 Jetpack Compose 构建完全原生的界面。它旨在提供典型应用所需的常用功能和组件。

¥@expo/ui is a set of native input components that allows you to build fully native interfaces with SwiftUI and Jetpack Compose. It aims to provide the commonly used features and components that a typical app will need.

安装

¥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.

Swift UI 示例

¥Swift UI examples

BottomSheet

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

<BottomSheet isOpen={isOpen} onIsOpenedChange={e => setIsOpened(e)}>
  <Text>Hello, world!</Text>
</BottomSheet>

按钮

¥Button

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

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

颜色选择器组件

¥ColorPicker component

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

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

DateTimePicker

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

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

仪表

¥Gauge

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

<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="circular"
/>

LinearProgress

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

<LinearProgress progress={0.5} style={{ width: 300 }} />

选择器（分段）

¥Picker (segmented)

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

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

选择器（轮盘）

¥Picker (wheel)

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

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

Switch

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

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

Switch 组件（复选框）

¥Switch component (checkbox)

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

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

TextInput 组件

¥TextInput component

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

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

Jetpack Compose 示例

¥Jetpack Compose examples

按钮

¥Button

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

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

DateTimePicker

import { DateTimePicker } from '@expo/ui/jetpack-compose';

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

拾取器

¥Picker

import { Picker } from '@expo/ui/jetpack-compose';

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

TextInput

    import { TextInput } from '@expo/ui/jetpack-compose';

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

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';

// Import from the Jetpack Compose package
import { Button } from '@expo/ui/jetpack-compose';