This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.
This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 57).
间隔器
一种布局间隔器，用于在兄弟元素之间产生空白。
一种布局间隔组件，用于在 Row 或 Column 内的兄弟元素之间产生空白。使用 size 创建固定间距，或使用 flexible 填充剩余的主轴空间。
安装
- npx expo install @expo/uiIf you are installing this in an existing React Native app, make sure to install expo in your project.
用法
固定大小的间隔
import { Host, Column, Text, Spacer } from '@expo/ui'; export default function FixedSpacerExample() { return ( <Host matchContents> <Column> <Text>上方</Text> <Spacer size={32} /> <Text>下方</Text> </Column> </Host> ); }
可伸缩间隔
可伸缩间隔会填充其父元素主轴方向上的剩余空间，将周围内容推到两端。
import { Host, Row, Text, Spacer } from '@expo/ui'; export default function FlexibleSpacerExample() { return ( <Host style={{ flex: 1 }}> <Row> <Text>前导</Text> <Spacer flexible /> <Text>尾随</Text> </Row> </Host> ); }
API
import { Spacer } from '@expo/ui';
Component
Type: React.Element<SpacerProps>
A layout spacer that produces empty space between siblings in a
Row or Column.
Props for the Spacer component.
A Spacer produces empty space between siblings in a Row or
Column. Use size for a fixed amount of space, or flexible
to fill the remaining space along the parent's main axis.
booleanWhether the component is disabled. Disabled components do not respond to user interaction.
boolean • Default: falseWhen true, the spacer expands to fill the available space along the
parent's main axis, pushing sibling content to the opposite end.
ModifierConfig[]Platform-specific modifier escape hatch. Pass an array of modifier configs
from @expo/ui/swift-ui/modifiers or @expo/ui/jetpack-compose/modifiers.
A modifier supplied here replaces any modifier of the same type that the
component derives from style or other props.
() => voidCalled when the component is removed from screen.
numberFixed size in density-independent pixels. Interpreted as width in a horizontal container and as height in a vertical container.
Pick<ViewStyle, 'padding' | 'paddingHorizontal' | 'paddingVertical' | 'paddingTop' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'backgroundColor' | 'borderRadius' | 'borderWidth' | 'borderColor' | 'opacity' | 'width' | 'height'>Platform-agnostic style properties. These are translated to SwiftUI modifiers on iOS and Jetpack Compose modifiers on Android.