Expo GlassEffect

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

iOS

tvOS

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~0.1.10

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

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

已知问题

isInteractive 属性只能在挂载时设置一次，在组件渲染后无法动态更改。如果你需要切换交互行为，必须使用不同的 key 重新挂载组件。
避免在 GlassView 或其父视图上使用小于 1 的 opacity 值，因为这会导致效果渲染不正确。请改用 glassEffectStyle 中的 animate 和 animationDuration 属性来淡入/淡出效果。更多信息请参见 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.absoluteFillObject,
    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,
  },
});

`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()
        ? '玻璃效果 API 可用'
        : '玻璃效果 API 不可用'}
    </Text>
  );
}

API

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

Components

`GlassContainer`

iOS

tvOS

Type: React.Element<GlassContainerProps>

GlassContainerProps

`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

`glassEffectStyle`

iOS

tvOS

Optional • Type: GlassStyle • Default: 'regular'

Glass effect style to apply to the view.

`isInteractive`

iOS

tvOS

Optional • Type: boolean • Default: false

Whether the glass effect should be interactive.

`tintColor`

iOS

tvOS

Optional • Type: string

Tint color to apply to the glass effect.

Inherited props

ViewProps

Methods

`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

`GlassStyle`

iOS

tvOS

Literal type: string

Acceptable values are: 'clear' | 'regular'