Docs
博客更新日志GitHub简中文档
首页指南EAS参考学习

Reference version

存档Expo SnackDiscord 和论坛新闻邮件

Expo BlurView iconExpo BlurView

一个会模糊视图下方所有内容的 React 组件。

Android
iOS
tvOS
Web
Included in Expo Go

GitHub

npm

更新日志

Bundled version:
~14.1.5

For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

一个会模糊视图下方所有内容的 React 组件。它的常见用途包括导航栏、标签栏和模态框。

Android 上的 BlurView 是一项实验性功能。要启用它，请使用 experimentalBlurMethod 属性。

已知问题

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

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

安装

Terminal
- npx expo install expo-blur

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

用法

Basic BlurView usage
import { Text, StyleSheet, View, SafeAreaView } from 'react-native';
import { BlurView } from 'expo-blur';

export default function App() {
  const text = '你好，我的容器正在模糊其下方的内容！';
  return (
    <SafeAreaView 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>
    </SafeAreaView>
  );
}

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',
  },
});

API

import { BlurView } from 'expo-blur';

Component

BlurView

Android
iOS
tvOS
Web

Type: React.Component<BlurViewProps>

BlurViewProps

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.

experimentalBlurMethod

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

Blur method to use on Android.

Currently, BlurView support is experimental on Android and may cause performance and graphical issues. It can be enabled by setting this property.

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.

Inherited Props

Types

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'

ExperimentalBlurMethod

Android

Literal Type: string

Blur method to use on Android.

  • 'none' - Falls back to 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 and rendering issues during transitions made by react-native-screens.

Acceptable values are: 'none' | 'dimezisBlurView'

将 borderRadius 与 BlurView 一起使用

在 Android 和 iOS 上使用 BlurView 时，如果显式提供 borderRadius 属性，它不会生效。要修复此问题，你可以使用 overflow: 'hidden' 样式，因为 BlurView 会继承 <View> 的属性。有关示例，请参见用法。