Expo UI

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

Android
iOS
Bundled version:
~0.1.1-alpha.10

此库目前处于 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';