Expo UI
一组组件,允许你直接使用 SwiftUI 和 Jetpack Compose 从 React 构建 UI。
此库目前处于 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
-
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';