@react-native-community/blur

普遍效果的组件 视图对iOS的模糊和活泼效应,以及 模糊视图 安卓号.

当前维护者 :

• 马尔布兰切岛 (单位:千美元)推特@titozzz从 布莱加德

内容

• 安装
• 使用量
• 振动维尤
• 实例反应原生应用程序
• 有问题吗?

安装

yarn add @react-native-community/blur

安装本地依赖( 只有iOS) :

cd ios && pod install

使用量

模糊视图

模糊类型

模糊类型( 仅iOS 13)

在iOS和Android上工作的完整用法示例:

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 (
    <View style={styles.container}>
      <Image
        key={'blurryImage'}
        source={{ uri }}
        style={styles.absolute}
      />
      <Text style={styles.absolute}>Hi, I am some blurred text</Text>
      {/* in terms of positioning and zIndex-ing everything before the BlurView will be blurred */}
      <BlurView
        style={styles.absolute}
        blurType="light"
        blurAmount={10}
        reducedTransparencyFallbackColor="white"
      />
      <Text>I'm the non blurred text because I got rendered on top of the BlurView</Text>
    </View>
  )
}

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 已启用 BlurView 将使用 reducedTransparencyFallbackColor 因为它是背景颜色而不是模糊。 如果没有 reducedTransparencyFallbackColor 提供BlurView将使用默认倒置颜色(白色、黑色或灰色,取决于 blurType(中文(简体) )

振动维尤

使用与 BlurView (单位:千美元)blurType, (中文(简体) ), blurAmount,以及 reducedTransparencyFallbackColor) (中文(简体) ).

振动效应让模糊的视野下的内容 通过更生动的显示

VibrancyView is only supported on iOS. Also note that the VibrancyView must contain nested views

import { VibrancyView } from "@react-native-community/blur";

export default function Menu() {
  return (
    <Image source={{ uri }} style={styles.absolute}>
      <VibrancyView blurType="light" style={styles.flex}>
      <Text>Hi, I am some vibrant text.</Text>
      </VibrancyView>
    </Image>
  )
}

实例反应原生应用程序

这个项目包括一个React Industrial app的例子,它被用来在此README中制作GIF. 您可以按照这些步骤运行应用程序 :

清除仓库

git clone https://github.com/react-native-community/react-native-blur.git

安装依赖关系

yarn

运行应用程序

yarn example android/ios

有问题吗?

随便你 创建问题