Expo UI

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

Android

iOS

GitHub

npm

更新日志

Bundled version:

~0.1.1-alpha.10

重要此库目前处于 alpha 阶段，并且会频繁出现破坏性变更。它在 Expo Go 应用中不可用 – 请使用开发构建来试用。

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

安装

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 示例

BottomSheet

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

<BottomSheet isOpened={isOpened} onIsOpenedChange={e => setIsOpened(e)}>
  <Text>你好，世界！</Text>
</BottomSheet>

另请参阅：官方 SwiftUI 文档

Button

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

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

另请参阅：官方 SwiftUI 文档

CircularProgress

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

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

另请参阅：官方 SwiftUI 文档

ColorPicker

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

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

另请参阅：官方 SwiftUI 文档

ContextMenu

注意：也称为 DropdownMenu。

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

<ContextMenu style={{ width: 150, height: 50 }}>
  <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="狗狗"
      options={['very', 'veery', 'veeery', 'much']}
      variant="menu"
      selectedIndex={selectedIndex}
      onOptionSelected={({ nativeEvent: { index } }) => setSelectedIndex(index)}
    />
  </ContextMenu.Items>
  <ContextMenu.Trigger>
    <Button variant="bordered" style={{ width: 150, height: 50 }}>
      显示菜单
    </Button>
  </ContextMenu.Trigger>
</ContextMenu>

另请参阅：官方 SwiftUI 文档

DateTimePicker (date)

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

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

另请参阅：官方 SwiftUI 文档

DateTimePicker (time)

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

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

另请参阅：官方 SwiftUI 文档

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

另请参阅：官方 SwiftUI 文档

LinearProgress

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

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

另请参阅：官方 SwiftUI 文档

List

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

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

另请参阅：官方 SwiftUI 文档

Picker (segmented)

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

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

另请参阅：官方 SwiftUI 文档

Picker (wheel)

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

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

另请参阅：官方 SwiftUI 文档

Slider

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

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

另请参阅：官方 SwiftUI 文档

Switch (toggle)

注意：也称为 Toggle。

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

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

另请参阅：官方 SwiftUI 文档

Switch (checkbox)

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

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

另请参阅：官方 SwiftUI 文档

TextInput

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

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

另请参阅：官方 SwiftUI 文档

Jetpack Compose 示例

Button

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

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

另请参阅：官方 Jetpack Compose 文档

CircularProgress

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

<CircularProgress progress={0.5} style={{ width: 300 }} color="blue" elementColors={{ trackColor: '#cccccc' }} />

另请参阅：官方 Jetpack Compose 文档

ContextMenu

注意：也称为 DropdownMenu。

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

<ContextMenu style={{ width: 150, height: 50 }}>
  <ContextMenu.Items>
    <Button
      elementColors={{ containerColor: '#0000ff', contentColor: '#00ff00' }}
      onPress={() => console.log('Pressed1')}>
      你好
    </Button>
    <Button
      variant="bordered"
      color="#ff0000"
      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" style={{ width: 150, height: 50 }}>
      显示菜单
    </Button>
  </ContextMenu.Trigger>
</ContextMenu>

另请参阅：官方 Jetpack Compose 文档

DateTimePicker (date)

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

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

另请参阅：官方 Jetpack Compose 文档

DateTimePicker (time)

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

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

另请参阅：官方 Jetpack Compose 文档

LinearProgress

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

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

另请参阅：官方 Jetpack Compose 文档

Picker (radio)

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

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

另请参阅：官方 Jetpack Compose 文档

Picker (segmented)

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

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

另请参阅：官方 Jetpack Compose 文档

Slider

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

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

另请参阅：官方 Jetpack Compose 文档

Switch (toggle)

注意：也称为 Toggle。

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

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

另请参阅：官方 Jetpack Compose 文档

Switch (checkbox)

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

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

另请参阅：官方 Jetpack Compose 文档

TextInput

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

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

另请参阅：官方 Jetpack Compose 文档

API

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

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

// 从 Jetpack Compose 包导入
import { Button } from '@expo/ui/jetpack-compose';