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

一个简单的模糊视图, 反应本地基于 @react-native-community/blur。 。 。 .

支持动画转换 反应-内在屏幕, (中文(简体) ), 反应-原生再激活, (中文(简体) ), 反应-内在导航 和莫达尔斯。 这个库支持Apple TV和Android TV!. !

[尖叫声] 下方标签 反应-导航/自下而上 财务报告和审定财务报表 粘性页眉组件 在Android没有支持。 更详细的信息,只是 点击这里来啊!

[注] 此软件包支持 仅限 新结构。 。 。 .

内容提要

• 安装
• 使用量
  • 使用列表
  • 使用 Modal
  • 使用 ImageBackground
• 构成部分
  • BlurView
    • 属性
  • BlurTarget
    • 属性
  • VibrancyView
    • 属性
• 类型
  • 模糊类型
  • 效果样式
• 迁移到 3.x
  • 为什么是这个变化?
• 平台差异
  • 机器人
  • iOS系统
• 博览
• 类型脚本支持
• 其他图书馆
• 捐款
• 许可证

安装

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:

cd ios && pod install && cd ..

使用量

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 下图:

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 使模糊的效果正确工作.

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 使模糊的效果正确工作.

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模糊效果正确工作.

属性

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

BlurTarget

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

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

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

属性

VibrancyView

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

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

属性

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

类型

这些都是可用的类型.

模糊类型

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

更多地了解模糊类型 这里。 。 。 .

效果样式

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

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

学习更多效果样式 这里。 。 。 .

迁移到 3.x

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

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

// ❌ 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 组件。 下面是一个小例子:

// ✅ 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平台上,组件利用 模糊视图 库以硬件加速渲染提供本地模糊效果.

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

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

下方标签 react-navigation/bottom-tabs 财务报告和审定财务报表 粘性页眉组件 没有 支持 ! 如果您想要自定义下标签或粘贴页眉组件, 请选择 @sbaiahmed1/react-native-blur。 。 。 .

仅基于 TextureView 被支持。 使用部件 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 数值没有.

这个 效果样式 没有 已支持.

博览

在博览会中,你需要转换为 自定义开发 或用途 预建。您也可以使用 React Intex.

类型脚本支持

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

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 - 反应元件模糊了视野下的一切 这通常用于导航条、标签条和模式.
• ✅ @sbaiahmed1/react-native-blur - 现代反应原生模糊视图组件,为iOS和Android平台提供原生模糊效果。 还添加了进步的模糊和液态玻璃.
• 🛑 @react-native-community/blur - 用于UIVisual Effect View对iOS的模糊和活泼效应的组件,以及Android的BlurView.

捐款

见 贡献指南 学习如何为储存库和发展工作流程作出贡献.

许可证

麻省理工学院

制造的 创建- 反应- 本土- 图书馆 ❤️