This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

一个命名空间组件，允许你创建 SwiftUI 命名空间，用于协调视图之间的动画和匹配几何效果。

安装

If you are installing this in an existing React Native app, make sure to install expo in your project.

用法

命名空间用于协调视图之间的动画和匹配几何效果。它们提供了一个可在组件之间共享的唯一标识符，从而创建平滑的过渡。

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

const namespaceId = React.useId();
return (
  <Namespace id={namespaceId}>
    <GlassEffectContainer>
      <Image
        systemName="paintbrush.fill"
        modifiers={[
          glassEffect({
            glass: {
              variant: 'clear',
            },
          }),
          glassEffectId('paintbrush', namespaceId),
        ]}
      />
    </GlassEffectContainer>
  </Namespace>
);