This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).

Expo GlassEffect

使用 iOS 原生 UIVisualEffectView 呈现液态玻璃效果的 React 组件。

iOS

tvOS

Included in Expo Go

GitHub

npm

更新日志

重要 GlassView 仅适用于 iOS 26 及以上版本。在不支持的平台上，它会回退为普通的 View。

使用 UIVisualEffectView 渲染原生 iOS 液态玻璃效果的 React 组件。支持可自定义的玻璃样式和色调颜色。

已知问题

将 GlassView 或其任何父视图的 opacity 设置为 0 会导致玻璃效果完全无法渲染。要淡入/淡出玻璃效果，请使用 glassEffectStyle 中内置的 animate 和 animationDuration 属性，而不是修改 opacity。如果你仍然想使用 opacity，请查看 opacity 动画解决方案示例。更多详情请参阅 Apple 的文档和 GitHub issue #41024。

安装

Terminal

- npx expo install expo-glass-effect

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

用法

`GlassView`

GlassView 组件会渲染原生 iOS 玻璃效果。它支持不同的玻璃效果样式，并且可以通过色调颜色进行自定义，以满足各种审美需求。

GlassView 基本用法

import { StyleSheet, View, Image } from 'react-native';
import { GlassView } from 'expo-glass-effect';

export default function App() {
  return (
    <View style={styles.container}>
      <Image
        style={styles.backgroundImage}
        source={{
          uri: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop',
        }}
      />

      {/* 基础玻璃视图 */}
      <GlassView style={styles.glassView} />

      {/* 具有透明样式的玻璃视图 */}
      <GlassView style={styles.tintedGlassView} glassEffectStyle="clear" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  backgroundImage: {
    ...StyleSheet.absoluteFill,
    width: '100%',
    height: '100%',
  },
  glassView: {
    position: 'absolute',
    top: 100,
    left: 50,
    width: 200,
    height: 100,
    borderRadius: 12,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  tintedGlassView: {
    position: 'absolute',
    top: 250,
    left: 50,
    width: 200,
    height: 100,
    borderRadius: 12,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  text: {
    fontSize: 16,
    fontWeight: '600',
    color: '#000',
    textAlign: 'center',
  },
});

`GlassContainer`

GlassContainer 组件允许你将多个玻璃视图组合成一个整体效果。

GlassContainer 示例

import { StyleSheet, View, Image } from 'react-native';
import { GlassView, GlassContainer } from 'expo-glass-effect';

export default function GlassContainerDemo() {
  return (
    <View style={styles.container}>
      <Image
        style={styles.backgroundImage}
        source={{
          uri: 'https://images.unsplash.com/photo-1547036967-23d11aacaee0?w=400&h=600&fit=crop',
        }}
      />
      <GlassContainer spacing={10} style={styles.containerStyle}>
        <GlassView style={styles.glass1} isInteractive />
        <GlassView style={styles.glass2} />
        <GlassView style={styles.glass3} />
      </GlassContainer>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  backgroundImage: {
    ...StyleSheet.absoluteFill,
    width: '100%',
    height: '100%',
  },
  containerStyle: {
    position: 'absolute',
    top: 200,
    left: 50,
    width: 250,
    height: 100,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 5,
  },
  glass1: {
    width: 60,
    height: 60,
    borderRadius: 30,
  },
  glass2: {
    width: 50,
    height: 50,
    borderRadius: 25,
  },
  glass3: {
    width: 40,
    height: 40,
    borderRadius: 20,
  },
});

玻璃效果样式动画

glassEffectStyle 属性接受一个包含 animate 和 animationDuration 属性的配置对象，用于在不同玻璃样式之间进行原生动画过渡。这是无需修改 opacity 就能淡入/淡出玻璃效果的推荐方式。

玻璃效果样式动画

import { useState } from 'react';
import { StyleSheet, Text, View, Image, Pressable } from 'react-native';
import { GlassView } from 'expo-glass-effect';

export default function AnimatedGlassStyleExample() {
  const [visible, setVisible] = useState(true);

  return (
    <View style={styles.container}>
      <View style={styles.backgroundImage}>
        <Image
          style={{
            width: 300,
            height: 200,
          }}
          source={{
            uri: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop',
          }}
        />
        <GlassView
          style={styles.glassView}
          glassEffectStyle={{
            style: visible ? 'clear' : 'none',
            animate: true,
            animationDuration: 0.5,
          }}
        />
      </View>
      <Pressable style={styles.toggleButton} onPress={() => setVisible(prev => !prev)}>
        <Text style={styles.toggleButtonText}>{visible ? '隐藏' : '显示'} 玻璃效果</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    height: 300,
    width: 300,
  },
  backgroundImage: {
    position: 'absolute',
  },
  glassView: {
    position: 'absolute',
    width: 200,
    height: 120,
    borderRadius: 12,
  },
  toggleButton: {
    position: 'absolute',
    bottom: 100,
    alignSelf: 'center',
    backgroundColor: '#007AFF',
    paddingVertical: 14,
    paddingHorizontal: 24,
    borderRadius: 12,
  },
  toggleButtonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
});

透明度动画解决方案

由于将 GlassView 或其父视图的 opacity 设置为 0 会导致玻璃效果完全无法渲染，因此你可以使用 Reanimated 在切换包装视图透明度的同时，将 glassEffectStyle 在所需样式和 'none' 之间切换。

玻璃效果透明度动画解决方案

import { GlassView } from 'expo-glass-effect';
import { StyleSheet, Text, View, Image, Pressable } from 'react-native';
import Animated, {
  useAnimatedProps,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

const AnimatedGlassView = Animated.createAnimatedComponent(GlassView);

export default function GlassOpacityAnimationExample() {
  const fadeOpacity = useSharedValue(0);

  const glassViewProps = useAnimatedProps(() => {
    const glassEffectStyle = fadeOpacity.value > 0.01 ? 'regular' : 'none';
    return {
      glassEffectStyle,
      style: {
        width: 150,
        height: 100,
        borderRadius: 12,
        position: 'absolute',
      },
    };
  });

  const fadeOpacityStyle = useAnimatedStyle(() => ({
    position: 'absolute',
    opacity: fadeOpacity.value,
    width: 150,
    height: 100,
    borderRadius: 12,
  }));

  return (
    <>
      <Text style={styles.title}>透明度动画解决方案（iOS 26.1+）</Text>
      <View style={styles.backgroundContainer}>
        <Image
          style={styles.backgroundImage}
          source={{
            uri: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop',
          }}
        />
        <Animated.View style={fadeOpacityStyle}>
          <AnimatedGlassView animatedProps={glassViewProps} />
        </Animated.View>
      </View>

      <Pressable
        style={styles.toggleButton}
        onPress={() => {
          fadeOpacity.value = withTiming(fadeOpacity.value > 0.5 ? 0 : 1, { duration: 500 });
        }}>
        <Text style={styles.toggleButtonText}>切换玻璃可见性</Text>
      </Pressable>
    </>
  );
}

const styles = StyleSheet.create({
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  backgroundContainer: {
    height: 300,
    borderRadius: 12,
    overflow: 'hidden',
    position: 'relative',
  },
  backgroundImage: {
    width: '100%',
    height: '100%',
  },
  toggleButton: {
    backgroundColor: '#007AFF',
    paddingVertical: 14,
    paddingHorizontal: 24,
    borderRadius: 12,
    alignItems: 'center',
  },
  toggleButtonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
});

`isLiquidGlassAvailable`

isLiquidGlassAvailable 函数可用于检查编译后的应用中是否可用 Liquid Glass 效果。它会验证系统和编译器版本，以及 Info.plist 设置。

import { isLiquidGlassAvailable } from 'expo-glass-effect';

export default function CheckLiquidGlass() {
  return (
    <Text>
      {isLiquidGlassAvailable()
        ? 'Liquid Glass 效果可用'
        : 'Liquid Glass 效果不可用'}
    </Text>
  );
}

`isGlassEffectAPIAvailable`

isGlassEffectAPIAvailable 函数用于检查设备在运行时是否可用 Liquid Glass API。

警告添加此 API 的原因是某些 iOS 26 测试版中没有提供 Liquid Glass API，这可能导致崩溃。在你的应用中使用 GlassView 之前，应先进行检查以确保兼容性。更多信息请参阅 GitHub issue #40911。

import { isGlassEffectAPIAvailable } from 'expo-glass-effect';

export default function CheckGlassEffectAPI() {
  return (
    <Text>
      {isGlassEffectAPIAvailable()
        ? 'Glass Effect API 可用'
        : 'Glass Effect API 不可用'}
    </Text>
  );
}

API

import {
  GlassView,
  GlassContainer,
  isLiquidGlassAvailable,
  isGlassEffectAPIAvailable,
} from 'expo-glass-effect';

Components

`GlassContainer`

iOS

tvOS

Type: React.Element<GlassContainerProps>

GlassContainerProps

`ref`

iOS

tvOS

Optional • Type: Ref<View>

`spacing`

iOS

tvOS

Optional • Type: number • Default: undefined

The distance at which glass elements start affecting each other. Controls when glass elements begin to merge together.

Inherited Props

ViewProps

`GlassView`

iOS

tvOS

Type: React.Element<GlassViewProps>

GlassViewProps

`colorScheme`

iOS

tvOS

Optional • Type: GlassColorScheme • Default: 'auto'

The color scheme for the glass effect appearance. Use this to override the system appearance when your app has its own theme toggle.

`glassEffectStyle`

iOS

tvOS

Optional • Literal type: union • Default: 'regular'

Glass effect style to apply to the view. Can be a simple string ('clear', 'regular', 'none') or a config object for controlling animation behavior.

Acceptable values are: GlassStyle | GlassEffectStyleConfig

`isInteractive`

iOS

tvOS

Optional • Type: boolean • Default: false

Whether the glass effect should be interactive.

`ref`

iOS

tvOS

Optional • Type: Ref<View>

`tintColor`

iOS

tvOS

Optional • Type: string

Tint color to apply to the glass effect.

Inherited Props

ViewProps

Methods

`isGlassEffectAPIAvailable()`

iOS

Checks whether the Liquid Glass API is available at runtime on the device.

This method was added because some iOS 26 beta versions do not have this API available, which can lead to crashes. You should check this before using GlassView and GlassContainer in your app to ensure compatibility.

Returns:

boolean

See: https://github.com/expo/expo/issues/40911

`isLiquidGlassAvailable()`

iOS

tvOS

Indicates whether the app is using the Liquid Glass design. The value will be true when the Liquid Glass components are available in the app.

This only checks for component availability. The value may also be true if the user has enabled accessibility settings that limit the Liquid Glass effect. To check if the user has disabled the Liquid Glass effect via accessibility settings, use AccessibilityInfo.isReduceTransparencyEnabled().

Returns:

boolean

Types

`GlassColorScheme`

iOS

tvOS

Literal Type: string

Acceptable values are: 'auto' | 'light' | 'dark'

`GlassEffectStyleConfig`

iOS

tvOS

Property	Type	Description
animate(optional)	`boolean`	Whether to animate the style change. Default:`false`
animationDuration(optional)	`number`	Duration of the animation in seconds. Uses system default if not specified.
style	`GlassStyle`	The glass effect style to apply.

`GlassStyle`

iOS

tvOS

Literal Type: string

Acceptable values are: 'clear' | 'regular' | 'none'