# @danielsaraldi/react-native-blur-view 中文文档

规范地址：https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/

版本：3\.2\.0
npm 元数据更新时间：2026-10-26T15:06:44.979Z
中文译文更新时间：2026-11-11T10:34:17.865Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40danielsaraldi/react-native-blur-view
原文对照：https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/?lang=original
项目主页：https://github.com/DanielAraldi/react-native-blur-view#readme
源码仓库：https://github.com/DanielAraldi/react-native-blur-view

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：128 kB，98 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \*，react-native \*
- 首次发布：2025-06-16T19:59:56.026Z
- 最新版本发布：2026-10-26T15:06:44.697Z
- 近 30 天下载量：56783（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：57（近 12 个月 29 个）

## 中文简介

一个简单的模糊视图, 反应本地

## 安装

```sh
npm install @danielsaraldi/react-native-blur-view
```

也可以使用：`pnpm add @danielsaraldi/react-native-blur-view`、`yarn add @danielsaraldi/react-native-blur-view`、`bun add @danielsaraldi/react-native-blur-view`

## README

# `@danielsaraldi/react-native-blur-view` 🌫️

一个简单的模糊视图, 反应本地基于 [`@react-native-community/blur`](https://github.com/margelo/react-native-blur)。 。 。 .

支持动画转换 [反应-内在屏幕](https://github.com/software-mansion/react-native-screens), (中文(简体) ), [反应-原生再激活](https://github.com/software-mansion/react-native-reanimated/), (中文(简体) ), [反应-内在导航](https://github.com/wix/react-native-navigation) 和莫达尔斯。 这个库支持Apple TV和Android TV!. !

> \[尖叫声\] 下方标签 [反应-导航/自下而上](https://reactnavigation.org/docs/bottom-tab-navigator/) 财务报告和审定财务报表 [粘性页眉组件](https://reactnative.dev/docs/scrollview#stickyheadercomponent) 在Android没有支持。 更详细的信息,只是 [点击这里](https://github.com/DanielAraldi/react-native-blur-view/issues/39#issuecomment-4081708642)来啊!

![GitHub package.json version](https://img.shields.io/github/package-json/v/DanielAraldi/react-native-blur-view?style=flat&color=brightgreen) ![Unpacked size](https://img.shields.io/npm/unpacked-size/%40danielsaraldi%2Freact-native-blur-view?style=flat&color=brightgreen) ![NPM Downloads](https://img.shields.io/npm/dm/%40danielsaraldi%2Freact-native-blur-view?style=flat)

> \[注\] 此软件包支持 **仅限** [新结构](https://reactnative.dev/blog/2024/10/23/the-new-architecture-is-here)。 。 。 .

![React Native Blur View on iOS](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/.github/previews/ios.gif) ![React Native Blur View on Android](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/.github/previews/android.gif)

## 内容提要

-   [安装](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-installation)
-   [使用量](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-usage)
    -   [使用列表](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-using-lists)
    -   [使用 `Modal`](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-using-modal)
    -   [使用 `ImageBackground`](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-using-imagebackground)
-   [构成部分](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-components)
    -   [`BlurView`](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-blurview)
        -   [属性](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-properties)
    -   [`BlurTarget`](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-blurtarget)
        -   [属性](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-properties-1)
    -   [`VibrancyView`](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-vibrancyview)
        -   [属性](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-properties-2)
-   [类型](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-types)
    -   [模糊类型](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-blur-types)
    -   [效果样式](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-effect-styles)
-   [迁移到 3.x](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-migrate-to-3x)
    -   [为什么是这个变化?](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-why-this-change)
-   [平台差异](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-platform-differences)
    -   [机器人](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-android)
    -   [iOS系统](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-ios)
-   [博览](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-expo)
-   [类型脚本支持](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-typescript-support)
-   [其他图书馆](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-others-libraries)
-   [捐款](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-contributing)
-   [许可证](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-license)

## 安装

```sh
npm install @danielsaraldi/react-native-blur-view
# or
yarn add @danielsaraldi/react-native-blur-view
# or
pnpm add @danielsaraldi/react-native-blur-view
# or
bun add @danielsaraldi/react-native-blur-view
```

安装本地依赖( N)**仅iOS**:

```sh
cd ios && pod install && cd ..
```

## 使用量

```tsx
import { useRef } from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import {
  BlurView,
  BlurTarget,
  VibrancyView,
} from '@danielsaraldi/react-native-blur-view';
// ...

export default function App() {
  const targetRef = useRef<View | null>(null);
  // ...

  return (
    <>
      <BlurView blurTarget={targetRef} style={styles.blurView}>
        <Text style={styles.text}>BlurView</Text>
      </BlurView>

      <VibrancyView style={styles.vibrancyView}>
        <Text style={styles.text}>VibrancyView</Text>
      </VibrancyView>

      <BlurTarget ref={targetRef} style={styles.blurTarget}>
        <ScrollView
          style={styles.scrollView}
          contentContainerStyle={styles.contentContainer}
          showsVerticalScrollIndicator={false}
        >
          {/* ... */}
        </ScrollView>
      </BlurTarget>
    </>
  );
}

export const styles = StyleSheet.create({
  blurView: {
    position: 'absolute',
    top: 0,

    width: '100%',
    height: 256,

    justifyContent: 'center',
    alignItems: 'center',
  },

  vibrancyView: {
    position: 'absolute',
    top: 256,

    width: '100%',
    height: 256,

    justifyContent: 'center',
    alignItems: 'center',
  },

  title: {
    fontSize: 24,
    fontWeight: 'bold',

    color: 'white',
  },

  main: {
    flex: 1,
  },

  content: {
    padding: 20,

    gap: 8,
  },
});
```

### 使用列表

您必须添加 `BlurView` 列表中的元素,后面的内容应当作为孩子加入 `BlurTarget` 组件。 检查使用示例 `ScrollView` 下图:

```tsx
import { useRef } from 'react';
import { ImageBackground, ScrollView, Text, View } from 'react-native';
import { BlurView, BlurTarget } from '@danielsaraldi/react-native-blur-view';
// ...

export function MyScreen() {
  const targetRef = useRef<View | null>(null);
  // ...

  return (
    <View style={styles.container}>
      <BlurTarget ref={targetRef} style={styles.blurTarget}>
        <ImageBackground
          style={styles.background}
          source={BACKGROUND}
          resizeMode="cover"
        />
      </BlurTarget>

      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={styles.contentContainer}
        showsVerticalScrollIndicator={false}
      >
        <BlurView blurTarget={targetRef} style={styles.blurView}>
          <Text style={styles.text}>BlurView 1</Text>
        </BlurView>

        <BlurView blurTarget={targetRef} style={styles.blurView}>
          <Text style={styles.text}>BlurView 2</Text>
        </BlurView>

        <BlurView blurTarget={targetRef} style={styles.blurView}>
          <Text style={styles.text}>BlurView 3</Text>
        </BlurView>

        {/* ... */}
      </ScrollView>
    </View>
  );
}
```

### 使用 `Modal`

您必须添加 `BlurTarget` 作为内容屏幕的父程序,因为它将是 **目标** 有点模糊 这个 `BlurView` 组件必须在内部使用 `Modal` 使模糊的效果正确工作.

```tsx
import { useRef, useState } from 'react';
import { Modal, View } from 'react-native';
import { BlurTarget, BlurView } from '@danielsaraldi/react-native-blur-view';
// ...

export function MyScreen() {
  const [isOpenModal, setIsOpenModal] = useState<boolean>(false);
  const targetRef = useRef<View | null>(null);
  // ...

  return (
    <>
      <Modal
        transparent
        statusBarTranslucent
        navigationBarTranslucent
        hardwareAccelerated
        visible={isOpenModal}
        onRequestClose={() => setIsOpenModal(false)}
        style={styles.modal}
      >
        <BlurView blurTarget={targetRef} style={styles.blurView} />

        <View style={styles.modalContent}>{/* ... */}</View>
      </Modal>

      <BlurTarget ref={targetRef} style={styles.blurTarget}>
        {/* ... */}
      </BlurTarget>
    </>
  );
}
```

### 使用 `ImageBackground`

您必须添加 `BlurTarget` 作为父母一方 `ImageBackground` 因为这将是 **目标** 有点模糊 这个 `BlurView` 组件必须用作 **兄长** 联 合 国 `BlurTarget` 使模糊的效果正确工作.

```tsx
import { useRef } from 'react';
import { ImageBackground, View } from 'react-native';
import { BlurTarget, BlurView } from '@danielsaraldi/react-native-blur-view';
// ...

export function MyScreen() {
  const targetRef = useRef<View | null>(null);
  // ...

  return (
    <>
      <View style={styles.blurViewWrapper}>
        <BlurView
          blurTarget={targetRef}
          style={styles.blurView}
          downscaleFactor={4}
        >
          {/** ... **/}
        </BlurView>
      </View>

      <BlurTarget ref={targetRef} style={styles.blurTarget}>
        <ImageBackground
          style={styles.background}
          source={{ uri: 'https://picsum.photos/seed/picsum/600/900' }}
          resizeMode="cover"
        />
      </BlurTarget>
    </>
  );
}
```

## 构成部分

### `BlurView`

这个 `BlurView` 组件扩展 a 的相同属性 `View` 组件。 这个 `blurTarget` 道具为 **所需经费** 使Android模糊效果正确工作.

#### 属性

| 财产 | 说明 | 默认 | 平台 |
| --- | --- | --- | --- |
| `blurTarget` | 页:1 `BlurTarget` 有待确定的组成部分 `BlurView` 在树上的组件. | `undefined` | 机器人 |
| `type` | [模糊类型](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-blur-types) 上线. | `light` | 全体 |
| `radius` | 模糊半径 `0` - 说吧 `100`。 。 。 . | `20.0` | 全体 |
| `downscaleFactor` | 降级系数 `0` - 说吧 `100`。 。 。 . | `6.0` | 机器人 |
| `overlayColor` | 在组件中添加覆盖颜色 . | `undefined` | 全体 |
| `androidColor` | 覆盖 `type` 属性颜色. | `undefined` | 机器人 |
| `reducedTransparencyFallbackColor` | 启用降低透明度时模糊效果的背景颜色 . | `white` | iOS系统 |

当值小于 `0` 或超过 `100` 备抵 `radius` 或者说 `downscaleFactor` 属性,该值被剪切.

### `BlurTarget`

这个 `BlurTarget` 组件扩展 a 的相同属性 `View` 组件.

本构成部分可供 **只有机器人**它有用,因为我们使用 [迪梅兹的3v图书馆](https://github.com/Dimezis/BlurView) 以应用模糊效应,因此其执行与iOS略有不同. 这个 `BlurTarget` 组件为常见 `View` (原始内容存档于2018-09-28). In iOS.

这个 `BlurTarget` 不得含有下列内容: `BlurView` 目标相同 `BlurTarget`编辑 `BlurTarget` 可能包含其他 `BlurTargets` 财务报告和审定财务报表 `BlurViews` 虽然.

#### 属性

| 财产 | 说明 | 默认 | 平台 |
| --- | --- | --- | --- |
| `ref` | 页:1 `BlurTarget` 有待确定的组成部分 `BlurView` 在树上的组件. | `undefined` | 机器人 |

### `VibrancyView`

这个 `VibrancyView` 组件扩展 a 的相同属性 `View` 组件.

本构成部分可供 **仅iOS**它对儿童内容适用活力效应。 安卓号上 `VibrancyView` 组件为常见 `View`编辑 `effectStyle` 属性 **没有支持** 在电视上.

#### 属性

| 财产 | 说明 | 默认 | 平台 |
| --- | --- | --- | --- |
| `type` | [模糊类型](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-blur-types) 上线. | `light` | iOS系统 |
| `effectStyle` | [效果样式](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-effect-styles) {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}给活力内容. | `label` | iOS系统 |
| `radius` | 模糊半径 `0` - 说吧 `100`。 。 。 . | `20.0` | iOS系统 |
| `overlayColor` | 在组件中添加覆盖颜色 . | `undefined` | iOS系统 |
| `reducedTransparencyFallbackColor` | 启用降低透明度时的活性效应的背景颜色 . | `white` | iOS系统 |

当值小于 `0` 或超过 `100` 备抵 `radius` 属性 `radius` 被剪辑.

## 类型

这些都是可用的类型.

### 模糊类型

在iOS上,所有类型都得到支持,但在Android上,这些类型使用RGBA颜色来模拟.

| 财产 | 说明 | 平台 |
| --- | --- | --- |
| `extra-light` | 景区比地底景区要轻. | 全体 |
| `light` | 观点领域与基本观点的大致光度相同. | 全体 |
| `dark` | 景区比地底景更暗. | 全体 |
| `extra-dark` | 景区甚至比地底景更暗. (中文(简体) )**tvOS >= 10**(中文(简体) ) | 全体 |
| `regular` | 一种适应用户界面样式的常规模糊样式。 ()**iOS >= 10**(中文(简体) ) | 全体 |
| `prominent` | 模糊的样式使内容更加突出,适应用户界面样式. ()**iOS >= 10**(中文(简体) ) | 全体 |
| `chrome-material` | 适应性模糊效应,产生系统铬的外观. (**iOS >= 13**(中文(简体) ) | 全体 |
| `material` | 适应性模糊效应,产生具有正常厚度的材料外观。 (**iOS >= 13**(中文(简体) ) | 全体 |
| `thick-material` | 一种可适应的模糊效应,它产生一种比正常更厚的材料的外观**iOS >= 13**(中文(简体) ) | 全体 |
| `thin-material` | 适应性模糊效应,产生薄材料外观. (**iOS >= 13**(中文(简体) ) | 全体 |
| `ultra-thin-material` | 一种可适应的模糊效应,产生出超薄材料的外观. (**iOS >= 13**(中文(简体) ) | 全体 |
| `chrome-material-light` | 产生系统染色体外观并总是轻而易举的模糊效应**iOS >= 13**(中文(简体) ) | 全体 |
| `material-light` | 模糊效应,产生出有正常厚度的材料外观,并总是轻而易举(**iOS >= 13**(中文(简体) ) | 全体 |
| `thick-material-light` | 一种模糊的影响,它造成一种材料的外观,它比正常的更厚,而且总是很轻**iOS >= 13**(中文(简体) ) | 全体 |
| `thin-material-light` | 模糊效应,产生出一薄材料的外观,并且总是轻而易举. (**iOS >= 13**(中文(简体) ) | 全体 |
| `ultra-thin-material-light` | 模糊效应,产生出一种超薄材料的外观,并且总是轻而易举地**iOS >= 13**(中文(简体) ) | 全体 |
| `chrome-material-dark` | 模糊效应产生系统铬的外观并总是阴暗. (C**iOS >= 13**(中文(简体) ) | 全体 |
| `material-dark` | 模糊效应,产生出具有正常厚度的材料外观,并始终为暗色. (**iOS >= 13**(中文(简体) ) | 全体 |
| `thick-material-dark` | 一种模糊的影响,它造成一种材料的外观,这种材料比正常的更厚并总是黑暗的**iOS >= 13**(中文(简体) ) | 全体 |
| `thin-material-dark` | 模糊效应,产生薄材料的外观,并总是阴暗. (**iOS >= 13**(中文(简体) ) | 全体 |
| `ultra-thin-material-dark` | 模糊效应,产生出超薄材料的外观,并总是阴暗的. (**iOS >= 13**(中文(简体) ) | 全体 |

更多地了解模糊类型 [这里](https://developer.apple.com/documentation/uikit/uiblureffect/style)。 。 。 .

### 效果样式

在iOS上,支持所有效果样式. 该财产可在 `VibrancyView` 组件,它是 **仅iOS**。 。 。 .

| 财产 | 说明 | 平台 |
| --- | --- | --- |
| `label` | 包含主内容的标签样式 。 ()**iOS >= 13**(中文(简体) ) | iOS系统 |
| `secondary-label` | 包含次要内容的标签样式 。 ()**iOS >= 13**(中文(简体) ) | iOS系统 |
| `tertiary-label` | 包含三级内容的标签样式 。 ()**iOS >= 13**(中文(简体) ) | iOS系统 |
| `quaternary-label` | 包含四元内容的标签样式 。 ()**iOS >= 13**(中文(简体) ) | iOS系统 |
| `fill` | 含有主要内容的大填充区域视图的样式。 ()**iOS >= 13**(中文(简体) ) | iOS系统 |
| `secondary-fill` | 含有二级内容的大填充区域视图样式。 ()**iOS >= 13**(中文(简体) ) | iOS系统 |
| `tertiary-fill` | 含有第三产业内容的大型填充区域视图样式。 ()**iOS >= 13**(中文(简体) ) | iOS系统 |
| `separator` | 分隔行的样式 。 ()**iOS >= 13**(中文(简体) ) | iOS系统 |

-   标签样式显示进步的不透明度从全白降到了近隐.
-   填充样式显示半透明矩值在逐渐减少的不透明水平上.
-   分隔器风格是专为薄而半透明的分隔线.

学习更多效果样式 [这里](https://developer.apple.com/documentation/uikit/uivibrancyeffectstyle)。 。 。 .

## 迁移到 3.x

> \[尖叫声\] 3.0.0版本在Android和iOS应用上引入了显著的API变化. 如果从 2.x 升级,请仔细阅读本节.

在3.0.0版本中 `x-light` 模糊 `type` 已更名为 `extra-light` 输入 `BlurView` 财务报告和审定财务报表 `VibrancyView` 组件 :

```tsx
// ❌ Old API (v2.x) - Deprecated
<BlurView blurTarget={targetRef} type='x-light' style={styles.blurView}>
  {/** ... **/}
</BlurView>

<VibrancyView blurTarget={targetRef} type='x-light' style={styles.vibrancyView}>
  {/** ... **/}
</VibrancyView>

// ✅ New API (v3.0.0) - Current
<BlurView blurTarget={targetRef} type='extra-light' style={styles.blurView}>
  {/** ... **/}
</BlurView>

<VibrancyView blurTarget={targetRef} type='extra-light' style={styles.vibrancyView}>
  {/** ... **/}
</VibrancyView>
```

一个新的 `type` 模糊调用 `extra-dark` 已添加到 `BlurView` 财务报告和审定财务报表 `VibrancyView` 组件。 下面是一个小例子:

```tsx
// ✅ New type (v3.0.0) - Current
<BlurView blurTarget={targetRef} type="extra-dark" style={styles.blurView}>
  {/** ... **/}
</BlurView>
```

### 为什么是这个变化?

这个版本完全专注于全电视设备支持. 主要变化如下:

-   **新支助**:加入Android TV和Apple TV的全力支持.
-   **类型**编号: `BlurView` 财务报告和审定财务报表 `VibrancyView` 构成部分类型经历了小的变化:
    -   **重命名**: 重命名为 `x-light` 改为 `extra-light`。 。 。 .
    -   **新类型**: 添加了一个新的 `extra-dark` 类型.
-   **运行时间**: ump Node.js 版本来自 `20.x` 改为 `22.x`。 。 。 .

## 平台差异

### 机器人

在Android平台上,组件利用 [模糊视图](https://github.com/Dimezis/BlurView) 库以硬件加速渲染提供本地模糊效果.

对于 `regular`, (中文(简体) ), `prominent`,而且材料类型模糊,覆盖的颜色不透明度由 `radius / 100` 以匹配iOS效果强度。 这不适用于当 `androidColor` 提供.

这个 `androidColor` 属性可以在您想要实现特定外观或将模糊效果与您的应用程序中的其他元素相匹配时有用。 这个 **覆盖** 页:1 `type` 属性.

下方标签 [`react-navigation/bottom-tabs`](https://reactnavigation.org/docs/bottom-tab-navigator/) 财务报告和审定财务报表 [粘性页眉组件](https://reactnative.dev/docs/scrollview#stickyheadercomponent) **没有** 支持 ! 如果您想要自定义下标签或粘贴页眉组件, 请选择 [`@sbaiahmed1/react-native-blur`](https://github.com/sbaiahmed1/react-native-blur)。 。 。 .

仅基于 [`TextureView`](https://source.android.com/docs/core/graphics/arch-tv) 被支持。 使用部件 [`SurfaceView`](https://developer.android.com/reference/android/view/SurfaceView) blurView第三方库不支持.

### iOS系统

在iOS上,默认支持所有类型. 然而,在Android上它们是RGBA颜色来模拟同样的模糊颜色.

这个 `extra-dark` 模糊类型在 iOS 上无法本地获取,所以它会回到 `dark` 模糊的类型.

对于 `regular`, (中文(简体) ), `prominent`类型模糊 `radius` 属性控制整个效果的强度(蓝、锡和饱和度)的百分比(`radius / 100`),因为这些类型不支持自定义模糊半径. A 类 `radius` 联 合 国 `100` 保持模糊型的原生强度,不能超越.

### tvOS 视频

在 tvOS 上,模糊类型 `extra-light`, (中文(简体) ), `light`, (中文(简体) ), `dark`, (中文(简体) ), `extra-dark`, (中文(简体) ), `regular`,以及 `prominent` 被支持。 其他模糊类型被API接受,但倒回到 `light` tvOS 上的模糊类型,因为 `UIBlurEffectStyle` 数值没有.

这个 [效果样式](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/#readme-effect-styles) **没有** 已支持.

## 博览

在博览会中,你需要转换为 [自定义开发](https://docs.expo.dev/develop/development-builds/introduction/) 或用途 [预建](https://docs.expo.dev/workflow/continuous-native-generation/)。您也可以使用 React Intex.

## 类型脚本支持

完整类型脚本支持, 并有合适的类型定义 !

```ts
import {
  BlurType,
  EffectStyle,
  BlurViewProps,
  BlurTargetProps,
  VibrancyProps,
} from '@danielsaraldi/react-native-blur-view';

export const INITIAL_BLUR_TYPE: BlurType = 'light';
export const INITIAL_EFFECT_STYLE: EffectStyle = 'label';

export interface CustomBlurViewProps extends BlurViewProps {
  // ...
}

export interface CustomBlurTargetProps extends BlurTargetProps {
  // ...
}

export interface CustomVibrancyViewProps extends VibrancyProps {
  // ...
}
```

## 其他图书馆

-   ✅ [`expo-blur`](https://docs.expo.dev/versions/latest/sdk/blur-view/) - 反应元件模糊了视野下的一切 这通常用于导航条、标签条和模式.
-   ✅ [`@sbaiahmed1/react-native-blur`](https://github.com/sbaiahmed1/react-native-blur) - 现代反应原生模糊视图组件,为iOS和Android平台提供原生模糊效果。 还添加了进步的模糊和液态玻璃.
-   🛑 [`@react-native-community/blur`](https://github.com/margelo/react-native-blur) - 用于UIVisual Effect View对iOS的模糊和活泼效应的组件,以及Android的BlurView.

## 捐款

见 [贡献指南](https://npmcn.com/package/%40danielsaraldi/react-native-blur-view/CONTRIBUTING.md) 学习如何为储存库和发展工作流程作出贡献.

## 许可证

麻省理工学院

* * *

制造的 [创建- 反应- 本土- 图书馆](https://github.com/callstack/react-native-builder-bob) ❤️

## 常见问题

### @danielsaraldi/react-native-blur-view 是什么？

一个简单的模糊视图, 反应本地

### 如何安装 @danielsaraldi/react-native-blur-view？

在项目目录运行 npm install @danielsaraldi/react-native-blur-view，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\*）、react-native（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @danielsaraldi/react-native-blur-view 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @danielsaraldi/react-native-blur-view 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @danielsaraldi/react-native-blur-view 可以商用吗？

@danielsaraldi/react-native-blur-view 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @danielsaraldi/react-native-blur-view 的下载量有多少？

根据 npm 官方下载统计，@danielsaraldi/react-native-blur-view 在 2026/10/12 – 2026/11/10 这 30 天内被下载 56,783 次，日均约 1,893 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @danielsaraldi/react-native-blur-view 还在维护吗？

最新版本 3\.2\.0 发布于 2026/10/26（15 天前）；至今共发布 57 个版本，其中过去 12 个月发布了 29 个；首次发布于 2025/06/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。