中文网
🌐 Nodejs.cn
首页指南EAS参考教程

Expo BlurView iconExpo BlurView

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

Android
iOS
tvOS
Web
Included in Expo Go
Bundled version:
~55.0.9

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

🌐 A React component that blurs everything underneath the view. Common usage of this is for navigation bars, tab bars, and modals.

信息 在 SDK 55 及更高版本中，expo-blur 在 Android 上是稳定的，但要使 BlurView 正常工作，需进行一些代码更改。有关更多信息，请参见 Android 支持 部分。

已知的问题

🌐 Known issues

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

🌐 The blur effect does not update when BlurView is rendered before dynamic content is rendered using, for example, FlatList. To fix this, make sure that BlurView is rendered after the dynamic content component. For example:

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

安装

🌐 Installation

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.

用法

🌐 Usage

基本的 iOS 和仅限网页的 BlurView 用法

This is the legacy way of creating a BlurView, which will result in a blur only on iOS. On Android, this will result in a view with a semi-transparent background.

Basic iOS-only BlurView usage
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',
  },
});
基本 BlurView 在Android上的使用

要在Android上模糊一个视图的背景，请将需要模糊的内容封装在BlurTargetView组件中，并将其ref传递给BlurView。

信息 注意： 请注意，只要所有BlurViews都适合单个BlurTargetView的边界内，就可以使用单个BlurTargetView处理多个BlurViews。这比创建多个BlurTargetViews更高效。

Basic BlurView usage with Android support
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 support

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

🌐 The blurring feature is stable on Android. There are a few things to keep in mind when migrating:

应用接口

🌐 API

要在 Android 上模糊视图的背景，请将需要模糊的内容封装在 BlurTargetView 组件中，并将其引用传递给 BlurView。你可以在 使用 部分看到示例。

🌐 To blur the background of a view on Android, wrap the content to be blurred in a BlurTargetView component and pass its ref to the BlurView. You can see an example in the Usage section.

性能

🌐 Performance

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

🌐 The blur can be achieved efficiently only by using the RenderNode Android API, which was introduced in Android SDK 31 (Android 9.0). Due to this, on older versions of Android expo-blur uses the much less efficient RenderScript API. If you want to avoid the performance penalty on older platforms you can use the dimezisBlurViewSdk31Plus BlurMethod which will only blur on newer versions of Android and fall back to the none on older versions.

应用接口

🌐 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.

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'

将 borderRadius 与 BlurView 一起使用

🌐 Using borderRadius with BlurView

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

🌐 When using BlurView on Android and iOS, the borderRadius property is not applied when provided explicitly. To fix this, you can use the overflow: 'hidden' style since BlurView inherits props from <View>. See Usage for an example.