中文网
Nodejs.cn 旗下网站
首页指南EAS参考教程

Expo UI

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

Android
iOS
Bundled version:
~0.1.1-alpha.9
此库目前处于 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 isOpened={isOpened} onIsOpenedChange={e => setIsOpened(e)}>
  <Text>Hello, world!</Text>
</BottomSheet>

另请参阅：SwiftUI 官方文档

¥See also: official SwiftUI documentation

按钮

¥Button

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

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

另请参阅：SwiftUI 官方文档

¥See also: official SwiftUI documentation

CircularProgress

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

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

另请参阅：SwiftUI 官方文档

¥See also: official SwiftUI documentation

ColorPicker

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

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

另请参阅：SwiftUI 官方文档

¥See also: official SwiftUI documentation

ContextMenu

注意：也称为下拉菜单。

¥Note: Also known as 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')}>
          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" style={{ width: 150, height: 50 }}>
          Show Menu
        </Button>
      </ContextMenu.Trigger>
    </ContextMenu>

另请参阅：SwiftUI 官方文档

¥See also: official SwiftUI documentation

DateTimePicker（日期）

¥DateTimePicker (date)

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

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

另请参阅：SwiftUI 官方文档

¥See also: official SwiftUI documentation

DateTimePicker (时间)

¥DateTimePicker (time)

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

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

另请参阅：SwiftUI 官方文档

¥See also: official SwiftUI documentation

仪表

¥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 官方文档

¥See also: official SwiftUI documentation

LinearProgress

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

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

另请参阅：SwiftUI 官方文档

¥See also: official SwiftUI documentation

列表

¥List

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

    <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}`)}
      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 官方文档

¥See also: official SwiftUI documentation

选择器（分段）

¥Picker (segmented)

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

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

另请参阅：SwiftUI 官方文档

¥See also: official SwiftUI documentation

选择器（轮盘）

¥Picker (wheel)

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

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

另请参阅：SwiftUI 官方文档

¥See also: official SwiftUI documentation

滑块

¥Slider

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

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

另请参阅：SwiftUI 官方文档

¥See also: official SwiftUI documentation

开关（切换）

¥Switch (toggle)

注意：也称为切换。

¥Note: Also known as Toggle.

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

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

另请参阅：SwiftUI 官方文档

¥See also: official SwiftUI documentation

开关（复选框）

¥Switch (checkbox)

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

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

另请参阅：SwiftUI 官方文档

¥See also: official SwiftUI documentation

TextInput

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

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

另请参阅：SwiftUI 官方文档

¥See also: official SwiftUI documentation

Jetpack Compose 示例

¥Jetpack Compose examples

按钮

¥Button

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

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

另请参阅：Jetpack Compose 官方文档

¥See also: official Jetpack Compose documentation

CircularProgress

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

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

另请参阅：Jetpack Compose 官方文档

¥See also: official Jetpack Compose documentation

ContextMenu

注意：也称为下拉菜单。

¥Note: Also known as 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')}>
          Hello
        </Button>
        <Button
          variant="bordered"
          color="#ff0000"
          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" style={{ width: 150, height: 50 }}>
          Show Menu
        </Button>
      </ContextMenu.Trigger>
    </ContextMenu>

另请参阅：Jetpack Compose 官方文档

¥See also: official Jetpack Compose documentation

DateTimePicker（日期）

¥DateTimePicker (date)

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

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

另请参阅：Jetpack Compose 官方文档

¥See also: official Jetpack Compose documentation

DateTimePicker (时间)

¥DateTimePicker (time)

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

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

另请参阅：Jetpack Compose 官方文档

¥See also: official Jetpack Compose documentation

LinearProgress

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

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

另请参阅：Jetpack Compose 官方文档

¥See also: official Jetpack Compose documentation

选择器（单选按钮）

¥Picker (radio)

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

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

另请参阅：Jetpack Compose 官方文档

¥See also: official Jetpack Compose documentation

选择器（分段）

¥Picker (segmented)

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

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

另请参阅：Jetpack Compose 官方文档

¥See also: official Jetpack Compose documentation

滑块

¥Slider

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

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

另请参阅：Jetpack Compose 官方文档

¥See also: official Jetpack Compose documentation

开关（切换）

¥Switch (toggle)

注意：也称为切换。

¥Note: Also known as Toggle.

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

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

另请参阅：Jetpack Compose 官方文档

¥See also: official Jetpack Compose documentation

开关（复选框）

¥Switch (checkbox)

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

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

另请参阅：Jetpack Compose 官方文档

¥See also: official Jetpack Compose documentation

TextInput

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

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

另请参阅：Jetpack Compose 官方文档

¥See also: official Jetpack Compose documentation

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