# @applicaster/blur 中文文档 规范地址：https://npmcn.com/package/%40applicaster/blur/ 版本：4\.4\.1 npm 元数据更新时间：2024-11-13T21:02:25.537Z 中文译文更新时间：2026-11-08T09:56:44.763Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40applicaster/blur 原文对照：https://npmcn.com/package/%40applicaster/blur/?lang=original 项目主页：https://github.com/react-native-community/react-native-blur 源码仓库：https://github.com/react-native-community/react-native-blur ## 关键信息（来自 npm 元数据） - 包体积（解压后）：109 kB，70 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：0 个 - peer 依赖：react \*，react-native \* - 首次发布：2024-11-13T21:02:24.775Z - 最新版本发布：2024-11-13T21:02:25.155Z - 近 30 天下载量：1812（2026-10-07 至 2026-11-05，npm 官方下载统计） - 已发布版本数：1（近 12 个月 0 个） ## 中文简介 反应原生模糊组件 ## 安装 ```sh npm install @applicaster/blur ``` 也可以使用：`pnpm add @applicaster/blur`、`yarn add @applicaster/blur`、`bun add @applicaster/blur` ## README # `@react-native-community/blur` [![npm version](https://badge.fury.io/js/%40react-native-community%2Fblur.svg)](https://badge.fury.io/js/%40react-native-community%2Fblur) 普遍效果的组件 视图对iOS的模糊和活泼效应,以及 [模糊视图](https://github.com/Dimezis/BlurView) 安卓号. ![](https://cloud.githubusercontent.com/assets/139536/25066337/3c9d44c0-224d-11e7-8ca6-028478bf4a7d.gif) ### 当前维护者 : - [马尔布兰切岛](https://github.com/Titozzz) (单位:千美元)[推特@titozzz](https://twitter.com/titozzz)从 [布莱加德](https://www.brigad.co/en-gb/about-us) ### 内容 - [安装](https://npmcn.com/package/%40applicaster/blur/#readme-installation) - [使用量](https://npmcn.com/package/%40applicaster/blur/#readme-usage) - [振动维尤](https://npmcn.com/package/%40applicaster/blur/#readme-vibrancyview) - [实例反应原生应用程序](https://npmcn.com/package/%40applicaster/blur/#readme-example-react-native-app) - [有问题吗?](https://npmcn.com/package/%40applicaster/blur/#readme-questions) ### 安装 ``` yarn add @react-native-community/blur ``` 安装本地依赖( 只有iOS) : ``` cd ios && pod install ``` ### 使用量 #### 模糊视图 | 财产 | 可能值 | 默认 | 平台 | | --- | --- | --- | --- | | `blurType` | 参见下面的模糊类型 | \- 说吧 | 全体 | | `blurAmount` | 0-100 (Android上最大模糊的Amount是32,因此更高的值会被夹入到32) | 10个 | 全体 | | `reducedTransparencyFallbackColor` | 任何颜色 | \- 说吧 | 仅iOS | | `blurRadius` | 0 - 25岁 | 匹配 iOS 模糊的挂载 | 只有机器人 | | `downsampleFactor` | 0 - 25岁 | 匹配 iOS 模糊的挂载 | 只有机器人 | | `overlayColor` | 任何颜色 | 基于 iOS 模糊的默认颜色Type | 只有机器人 | #### 模糊类型 | 名称 | 说明 | | --- | --- | | `xlight` | 额外光线模糊类型 | | `light` | 光线模糊类型 | | `dark` | 黑暗模糊类型 | | `extraDark` | 额外暗模糊类型( 只有 tvOS) | | `regular` | 常规模糊类型(仅iOS 10+和tvOS) | | `prominent` | 突出的模糊类型(仅iOS 10+和tvOS) | #### 模糊类型( 仅iOS 13) | 名称 | 说明 | | --- | --- | | `chromeMaterial` | 一种可适应的模糊效应,产生系统铬的外观. | | `material` | 一种可适应的模糊效应,产生出具有正常厚度的材料外观. | | `thickMaterial` | 一种可适应的模糊效应,产生出比平时更厚的材料外观. | | `chromeMaterial` | 一种可适应的模糊效应,产生系统铬的外观. | | `thinMaterial` | 一种可适应的模糊效应,产生出超薄材料的外观. | | `ultraThinMaterial` | 一种可适应的模糊效应,产生出超薄材料的外观. | | `chromeMaterialDark` | 一种模糊的影响,它制造出超薄材料的外表,并且总是阴暗. | | `materialDark` | 一种模糊的效应,它制造出薄材料的外观,并且总是阴暗. | | `thickMaterialDark` | 一种模糊的效果,它产生出一种具有正常厚度的材料的外观,并且总是阴暗. | | `thinMaterialDark` | 模糊效应,产生出一种比平时更厚并总是阴暗的物质外表. | | `ultraThinMaterialDark` | 一种模糊的效应,它产生系统铬的外观,并且总是阴暗. | | `chromeMaterialLight` | 一种可适应的模糊效应,产生系统铬的外观. | | `materialLight` | 一种可适应的模糊效应,产生出具有正常厚度的材料外观. | | `thickMaterialLight` | 一种可适应的模糊效应,产生出比平时更厚的材料外观. | | `thinMaterialLight` | 一种可适应的模糊效应,产生薄材料的外观. | | `ultraThinMaterialLight` | 一种可适应的模糊效应,产生出超薄材料的外观. | 在iOS和Android上工作的完整用法示例: ```javascript import React, { Component } from "react"; import { View, Image, Text, StyleSheet } from "react-native"; import { BlurView } from "@react-native-community/blur"; export default function Menu() { return ( Hi, I am some blurred text {/* in terms of positioning and zIndex-ing everything before the BlurView will be blurred */} I'm the non blurred text because I got rendered on top of the BlurView ) } const styles = StyleSheet.create({ container: { justifyContent: "center", alignItems: "center" }, absolute: { position: "absolute", top: 0, left: 0, bottom: 0, right: 0 } }); ``` 在这个例子中 `Image` 组件将模糊,因为 `BlurView` 位于顶部。 不过 `Text` 将保持无忧无虑. 如果无障碍环境 [`Reduce Transparency`](https://support.apple.com/guide/iphone/display-settings-iph3e2e1fb0/ios) 已启用 `BlurView` 将使用 `reducedTransparencyFallbackColor` 因为它是背景颜色而不是模糊。 如果没有 `reducedTransparencyFallbackColor` 提供`BlurView`将使用默认倒置颜色(白色、黑色或灰色,取决于 `blurType`(中文(简体) ) ### 振动维尤 使用与 `BlurView` (单位:千美元)`blurType`, (中文(简体) ), `blurAmount`,以及 `reducedTransparencyFallbackColor`) (中文(简体) ). 振动效应让模糊的视野下的内容 通过更生动的显示 `VibrancyView is only supported on iOS. Also note that the VibrancyView must contain nested views` ```javascript import { VibrancyView } from "@react-native-community/blur"; export default function Menu() { return ( Hi, I am some vibrant text. ) } ``` ### 实例反应原生应用程序 这个项目包括一个React Industrial app的例子,它被用来在此README中制作GIF. 您可以按照这些步骤运行应用程序 : 清除仓库 ``` git clone https://github.com/react-native-community/react-native-blur.git ``` 安装依赖关系 ``` yarn ``` #### 运行应用程序 ``` yarn example android/ios ``` ### 有问题吗? 随便你 [创建问题](https://github.com/Kureev/react-native-blur/issues/new) ## 常见问题 ### @applicaster/blur 是什么？ 反应原生模糊组件 ### 如何安装 @applicaster/blur？ 在项目目录运行 npm install @applicaster/blur，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\*）、react-native（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @applicaster/blur 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @applicaster/blur 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @applicaster/blur 可以商用吗？ @applicaster/blur 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @applicaster/blur 的下载量有多少？ 根据 npm 官方下载统计，@applicaster/blur 在 2026/10/07 – 2026/11/05 这 30 天内被下载 1,812 次，日均约 60 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @applicaster/blur 还在维护吗？ 最新版本 4\.4\.1 发布于 2024/11/14（2 年前）；至今共发布 1 个版本，其中过去 12 个月发布了 0 个；首次发布于 2024/11/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。