文档
BlogChangelogStar us on GitHub
首页指南EASReferenceLearn

Reference version

存档Expo SnackDiscord and forums新闻邮件

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

Expo BlurView iconExpo BlurView

模糊视图下方所有内容的 React 组件

Android
iOS
tvOS
Web
Included in Expo Go

GitHub

npm

更新日志

Recommended version:
~58.0.0

一个可将视图下方所有内容进行模糊处理的 React 组件。常见用法包括导航栏、标签栏和模态框。

信息 在 SDK 55 及更高版本中，expo-blur 在 Android 上已稳定，但需要进行一些代码更改才能使 BlurView 正常工作。请参阅 Android 支持 部分以了解更多信息。

已知问题

当使用例如 FlatList 动态渲染内容时，如果在动态内容之前渲染 BlurView，模糊效果不会更新。要解决此问题，请确保在动态内容组件之后渲染 BlurView。例如：

<View>
  <FlatList />
  <BlurView />
</View>

安装

Terminal
- npx expo install expo-blur
- yarn expo install expo-blur
- pnpm expo install expo-blur
- bun expo install expo-blur

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

使用

仅适用于基本 iOS 和 Web 的 BlurView 用法

这是创建 BlurView 的传统方式，仅会在 iOS 上产生模糊效果。在 Android 上，这将产生一个带有半透明背景的视图。

仅适用于基本 iOS 的 BlurView 用法
import { Text, StyleSheet, View } from 'react-native';
import { BlurView } from 'expo-blur';

export default function App() {
  const text = 'Hello, my container is blurring contents underneath!';
  return (
    <View style={styles.container}>
      <View style={styles.background}>
        {[...Array(20).keys()].map(i => (
          <View
            key={`box-${i}`}
            style={[styles.box, i % 2 === 1 ? styles.boxOdd : styles.boxEven]}
          />
        ))}
      </View>
      <BlurView intensity={100} style={styles.blurContainer}>
        <Text style={styles.text}>{text}</Text>
      </BlurView>
      <BlurView intensity={80} tint="light" style={styles.blurContainer}>
        <Text style={styles.text}>{text}</Text>
      </BlurView>
      <BlurView intensity={90} tint="dark" style={styles.blurContainer}>
        <Text style={[styles.text, { color: '#fff' }]}>{text}</Text>
      </BlurView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  blurContainer: {
    flex: 1,
    padding: 20,
    margin: 16,
    textAlign: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
    borderRadius: 20,
  },
  background: {
    flex: 1,
    flexWrap: 'wrap',
    ...StyleSheet.absoluteFill,
  },
  box: {
    width: '25%',
    height: '20%',
  },
  boxEven: {
    backgroundColor: 'orangered',
  },
  boxOdd: {
    backgroundColor: 'gold',
  },
  text: {
    fontSize: 24,
    fontWeight: '600',
  },
});
带 Android 支持的基本 BlurView 用法

要在 Android 上模糊视图的背景，请将要进行模糊处理的内容包裹在 BlurTargetView 组件中，并将其 ref 传递给 BlurView。

信息 注意： 请注意，只要所有 BlurView 都位于单个 BlurTargetView 的边界内，就可以将同一个 BlurTargetView 用于多个 BlurView。这比创建多个 BlurTargetView 更高效。

带 Android 支持的基本 BlurView 用法
import { BlurView, BlurTargetView } from 'expo-blur';
import { useRef } from 'react';
import { Text, StyleSheet, View } from 'react-native';

export default function App() {
  const targetRef = useRef<View | null>(null);
  const text = 'Hello, my container is blurring contents underneath!';

  return (
    <View style={styles.container}>
      <BlurTargetView ref={targetRef} style={styles.background}>
        {[...Array(20).keys()].map(i => (
          <View
            key={`box-${i}`}
            style={[styles.box, i % 2 === 1 ? styles.boxOdd : styles.boxEven]}
          />
        ))}
      </BlurTargetView>
      <BlurView
        blurTarget={targetRef}
        intensity={100}
        style={styles.blurContainer}
        blurMethod="dimezisBlurView">
        <Text style={styles.text}>{text}</Text>
      </BlurView>
      <BlurView
        blurTarget={targetRef}
        intensity={80}
        tint="light"
        style={styles.blurContainer}
        blurMethod="dimezisBlurView">
        <Text style={styles.text}>{text}</Text>
      </BlurView>
      <BlurView
        blurTarget={targetRef}
        intensity={90}
        tint="dark"
        style={styles.blurContainer}
        blurMethod="dimezisBlurView">
        <Text style={[styles.text, { color: '#fff' }]}>{text}</Text>
      </BlurView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  blurContainer: {
    flex: 1,
    padding: 20,
    margin: 16,
    textAlign: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
    borderRadius: 20,
  },
  background: {
    flex: 1,
    flexWrap: 'wrap',
    ...StyleSheet.absoluteFill,
  },
  box: {
    width: '25%',
    height: '20%',
  },
  boxEven: {
    backgroundColor: 'orangered',
  },
  boxOdd: {
    backgroundColor: 'gold',
  },
  text: {
    fontSize: 24,
    fontWeight: '600',
  },
});

Android 支持

模糊功能在 Android 上已稳定。在迁移时，需要注意以下几点：

API

要在 Android 上模糊视图的背景，请将要进行模糊处理的内容包裹在 BlurTargetView 组件中，并将其 ref 传递给 BlurView。你可以在 使用 部分查看示例。

性能

只有使用 RenderNode Android API 才能高效地实现模糊，该 API 在 Android SDK 31（Android 12.0）中引入。因此，在较旧版本的 Android 上，expo-blur 使用效率低得多的 RenderScript API。 如果你想避免在较旧平台上的性能损失，可以使用 dimezisBlurViewSdk31Plus BlurMethod， 它只会在较新版本的 Android 上进行模糊处理，并在较旧版本上回退为 none。

API

import { BlurView } from 'expo-blur';

Components

BlurView

Android
iOS
tvOS
Web

Type: React.Component<BlurViewProps, BlurViewState>

BlurViewProps

blurMethod

Android
Optional • Type: BlurMethod • Default: 'none'

Blur method to use on Android.

blurReductionFactor

Android
Optional • Type: number • Default: 4

A number by which the blur intensity will be divided on Android.

When using experimental blur methods on Android, the perceived blur intensity might differ from iOS at different intensity levels. This property can be used to fine tune it on Android to match it more closely with iOS.

blurTarget

Android
Optional • Type: RefObject<View | null>

A ref to a BlurTargetView, which this BlurView will blur as its background.

intensity

Android
iOS
tvOS
Web
Optional • Type: number • Default: 50

A number from 1 to 100 to control the intensity of the blur effect.

You can animate this property using react-native-reanimated.

tint

Android
iOS
tvOS
Web
Optional • Type: BlurTint • Default: 'default'

A tint mode which will be applied to the view.

Note: Every tint adds a translucent color layer on top of the blur. No value renders the blur alone.

Inherited props

BlurTargetView

Android
iOS
tvOS
Web

Type: React.Element<BlurTargetViewProps>

BlurTargetViewProps

ref

Android
iOS
tvOS
Web
Optional • Type: RefObject<View | null>

Inherited props

Types

BlurMethod

Android

Literal type: string

Blur method to use on Android.

  • 'none' - Renders a semi-transparent view instead of rendering a blur effect.

  • 'dimezisBlurView' - Uses a native blur view implementation based on BlurView library. This method may lead to decreased performance on Android SDK 30 and below.

  • 'dimezisBlurViewSdk31Plus' - Uses a native blur view implementation based on BlurView library on Android SDK 31 and above, for older versions of Android falls back to 'none'. This is due to performance limitations on older versions of Android, see the performance section to learn more.

Acceptable values are: 'none' | 'dimezisBlurView' | 'dimezisBlurViewSdk31Plus'

BlurTint

Android
iOS
tvOS
Web

Literal type: string

Acceptable values are: 'light' | 'dark' | 'default' | 'extraLight' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark'

在 BlurView 中使用 borderRadius

在 Android 和 iOS 上使用 BlurView 时，显式提供 borderRadius 属性不会生效。要解决此问题，可以使用 overflow: 'hidden' 样式，因为 BlurView 会继承 <View> 的属性。请参阅使用获取示例。