This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.
命名空间
一个允许你在 SwiftUI 中创建命名空间的组件
iOS
tvOS
Included in Expo Go
一个 Namespace 组件，可用于创建 SwiftUI Namespaces，以协调视图间的动画和匹配几何效果。
安装
Terminal
If you are installing this in an existing React Native app, make sure to install expo in your project.
用法
Namespaces 用于协调视图间的动画和匹配几何效果。它们提供一个唯一标识符，可以在多个组件之间共享，从而创建流畅的过渡效果。
import { Host, HStack, GlassEffectContainer, Image, Namespace, VStack, Button, Text, } from '@expo/ui/swift-ui'; import { padding, glassEffect, animation, Animation, glassEffectId, background, cornerRadius, frame, foregroundStyle, } from '@expo/ui/swift-ui/modifiers'; import { useId, useState } from 'react'; function MatchedGeometryExample() { const [isGlassExpanded, setIsGlassExpanded] = useState(false); const namespaceId = useId(); return ( <Host style={{ flex: 1, backgroundColor: 'purple', }}> <VStack spacing={60} modifiers={[ animation( Animation.spring({ duration: 0.8 }), isGlassExpanded ), ]}> <Namespace id={namespaceId}> <GlassEffectContainer spacing={30} modifiers={[ animation( Animation.spring({ duration: 0.8 }), isGlassExpanded ), padding({ all: 30 }), cornerRadius(20), ]}> <VStack spacing={25}> <HStack spacing={25}> <Image systemName="paintbrush.fill" size={42} modifiers={[ frame({ width: 50, height: 50 }), padding({ all: 15 }), glassEffect({ glass: { variant: 'clear', }, }), glassEffectId('paintbrush', namespaceId), cornerRadius(15), ]} /> <Image systemName="scribble.variable" size={42} modifiers={[ frame({ width: 50, height: 50 }), padding({ all: 15 }), glassEffect({ glass: { variant: 'clear', }, }), glassEffectId('scribble', namespaceId), cornerRadius(15), ]} /> <Image systemName="pencil.tip.crop.circle" size={42} modifiers={[ frame({ width: 50, height: 50 }), padding({ all: 15 }), glassEffect({ glass: { variant: 'clear', }, }), glassEffectId('pencil', namespaceId), cornerRadius(15), ]} /> </HStack> {isGlassExpanded && ( <HStack spacing={25}> <Image systemName="eraser.fill" size={42} modifiers={[ frame({ width: 50, height: 50 }), padding({ all: 15 }), glassEffect({ glass: { variant: 'clear', }, }), glassEffectId('eraser', namespaceId), cornerRadius(15), ]} /> <Image systemName="highlighter" size={42} modifiers={[ frame({ width: 50, height: 50 }), padding({ all: 15 }), glassEffect({ glass: { variant: 'clear', }, }), glassEffectId('highlighter', namespaceId), cornerRadius(15), ]} /> <Image systemName="heart.fill" size={42} modifiers={[ frame({ width: 50, height: 50 }), padding({ all: 15 }), glassEffect({ glass: { variant: 'clear', }, }), glassEffectId('heart.fill', namespaceId), cornerRadius(15), ]} /> </HStack> )} </VStack> </GlassEffectContainer> </Namespace> <VStack spacing={15}> <Button onPress={() => setIsGlassExpanded(!isGlassExpanded)} modifiers={[ padding({ horizontal: 30, vertical: 15 }), background('#000'), cornerRadius(25), glassEffect({ glass: { variant: 'clear', }, }), ]}> <Text modifiers={[foregroundStyle('#fff')]}> {isGlassExpanded ? '隐藏工具' : '显示更多工具'} </Text> </Button> </VStack> </VStack> </Host> ); }
API
import { Namespace } from '@expo/ui/swift-ui';
Component
Type: React.Element<NamespaceProps>
A component that provides a SwiftUI Namespace to its children.
Example
const namespaceId = React.useId(); return ( <Namespace id={namespaceId}> <GlassEffectContainer> <Image systemName="paintbrush.fill" modifiers={[ glassEffect({ glass: { variant: 'clear', }, }), glassEffectId('paintbrush', namespaceId), ]} /> </GlassEffectContainer> </Namespace> );
Type:
ReactNode