如何使用 react-native 制作模糊效果？答案

【问题标题】：how to make the blur effect with react-native?如何使用 react-native 制作模糊效果？
【发布时间】：2016-09-05 00:05:26
【问题描述】：

如何使用 react-native 制作模糊效果？比如“背景图片”

我想切换'blur'和'none'的效果，'none'表示没有模糊效果

【问题讨论】：

标签： image image-processing react-native blur

【解决方案1】：

现在您可以在不使用任何库的情况下使用以下属性执行此操作：blurRadius。

例如

<Image
    style={styles.img}
    resizeMode='cover'
    source={imgSrc} 
    blurRadius={1}
/>

说明：数字（1）表示您要对图像应用的模糊量，数字越大，图像越模糊。

~~不幸的是，这还不能在 Android 上运行 (RN 0.40.0)。不过，对于只在寻找 iOS 解决方案的人来说，它可能会很有用。~~

编辑：它现在似乎可以在 Android 上运行。

【讨论】：

从 RN 0.46.4 开始，这对我来说适用于 android (API 19)。
我正在寻找一种使用动画事件模糊的解决方案，但这即使在本机驱动程序上也不起作用。还有其他解决方案吗？
@GuiHerzog : Is it possible to show the content which is behind the modal ?
在没有任何库的情况下，这个作品令人惊叹，简直是好消息，可以在<ImageBackground上使用

【解决方案2】：

尝试使用“react-native”中的 {ImageBackground} 并像这样设置 blurRadius={number}：

<ImageBackground
      style={{flex: 1}}
      source={require('../assets/example.jpg')}
      blurRadius={90}>
    <Text>Blur background<Text>
</ImageBackground>

https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting https://facebook.github.io/react-native/docs/image.html#blurradius

【讨论】：

【解决方案3】：

要在react-native 中模糊和整个视图，您可以使用@react-native-community/blur 并像这样应用它：

import React, { Component } from 'react';
import { BlurView } from '@react-native-community/blur';
import {
  StyleSheet,
  Text,
  View,
  findNodeHandle,
  Platform,
  Image,
} from 'react-native';

const styles = StyleSheet.create({
  title: {
    color: 'black',
    fontSize: 15,
  },
  absolute: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
  blurredView: {
    // For me android blur did not work until applying a background color:
    backgroundColor: 'white',
  },
});

export default class MyBlurredComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { viewRef: null };
  }

  onTextViewLoaded() {
    this.setState({ viewRef: findNodeHandle(this.viewRef) });
  }

  render() {
    return (
      <View>
        <View
          style={[
            styles.blurredView,
          ]}
          ref={(viewRef) => { this.viewRef = viewRef; }}
          onLayout={() => { this.onTextViewLoaded(); }}
        >
          <Image
            style={{ width: 100, height: 100 }}
            source={{ uri: 'https://facebook.github.io/react-native/docs/assets/GettingStartedCongratulations.png' }}
          />
          <Text style={[styles.title]}>
            TEXT 2222 \n
            TEXT 3333
          </Text>
        </View>
        {
          (this.state.viewRef || Platform.OS === 'ios') && <BlurView
            style={styles.absolute}
            viewRef={this.state.viewRef}
            blurType="light"
            blurAmount={3}
            blurRadius={5}
          />
        }
      </View>
    );
  }
}

// 部门：

 "react-native": "0.53.3",
 "@react-native-community/blur": "^3.2.2"

结果：

【讨论】：

您能否指导我如何在按下按钮时取消模糊内容？
@BalajiKartheeswaran 您所要做的就是在 blurRadiius 中定义一个变量，如下所示：然后在您的按钮上单击将变量更改为所需的模糊 onPress=() =>{this.currentBlur=0.5} 类似的东西

【解决方案4】：

安装react-native-blur：

npm install react-native-blur

import BlurView from 'react-native-blur';

...
<BlurView blurType="light" style={styles.blur}>
...

【讨论】：

从 'react-native-blur' 导入 {BlurView};
在android中使用多个Blurview时库损坏。

【解决方案5】：

如果您使用 CRNA 创建应用，即使用 expo。您可以使用 Expo 中的 BlurView。

import {BlurView} from 'expo';

它有两个道具来控制模糊效果。

tint 接受字符串值，即light、default 或dark。和intensity，范围从1 to 100

【讨论】：

这仅适用于图像吗？或者这是否会模糊所有子组件的原生视图？
适用于所有子组件

【解决方案6】：

任何试图在 react native android 中模糊视频视图的人都无法使用在编写此答案时可用的库来做到这一点。但是我通过使用 WebView 作为视频的框架来实现这个效果。编写一个带有 video 标签的小 HTML 页面，并根据您的要求对其进行样式设置，然后将带有 blur 作为值的 CSS 过滤器属性添加到 video 标签的样式中。还创建一些 javascript 函数来播放和暂停视频（它们将只是一个衬里），您可以使用 WebView 的 injectJavaScript() 方法从 react-native 代码中调用这些函数。您可以使用 WebView 组件的源探针的 html 属性将此 html 代码直接添加到 WebView。这显然是一个 hacky 解决方案，它不会像本地解决方案那样快。如果你想应用一些动画或者对视频布局做一些事情，那么在 react-native 代码中使用 WebView 组件，这将和其他 react-native 组件一样快。

【讨论】：

【解决方案7】：

使用最新的 React 本机版本 (0.57)，您可以使用 blurRadius，它适用于 iOS 和 Android http://facebook.github.io/react-native/docs/image#blurradius

【讨论】：

【解决方案8】：

试试这个模糊的库。

依赖:: compile 'jp.wasabeef:blurry:2.0.2'

https://github.com/wasabeef/Blurry

【讨论】：

1) code.tutsplus.com/tutorials/… 2) github.com/nicklockwood/FXBlurView 这个链接会帮助你

【解决方案9】：

实现此功能的另一种方法是使用来自expo Blur 的模糊视图。您可以通过运行将其添加到 expo 托管项目中：

expo install expo-blur Read more here
或 Read Here 获取有关裸 react-native 应用程序的说明：

Android 和 iOS 都支持，也有 Web 支持。

示例用法：

    import { BlurView } from 'expo-blur';
    import {Text} from 'react-native'
    const ExampleBlurView=()=>{
    return( <BlurView intensity={80} tint={'default'} style={{flex:1}}>
    <Text>Hello World</Text>
    <BlurView/>
    })}

【讨论】：

【解决方案10】：

使用 blurRadius 道具。它预先附加到 React Native 中所有基于 Image 的组件，例如 Image、BackgroundImage。一个从 0 到 100 的数值，代表半径百分比，其中 10 = 10% 和 100 = 100%

【讨论】：

【解决方案11】：

正如@Shaikh Amaan FM 所说，您可以使用 WebView。它必须位于要模糊的视图上方。

...
<WebView
    style={[s.absolute, s.transparent]}
    originWhitelist={['*']}
    source={{ html:
        '<div style="' +
        'position: absolute; top: 0; right:0; bottom: 0; left: 0;' +
        'background: rgba(255,255,255,0.2); backdrop-filter: blur(48px);' +
        '/*width:100%; height:100%; margin:0; padding:-10px;*/' +
        '/*background: #ff000033;*/ /*transparent*/ /*background: #4fc3f733;*/  
        /*border: none*/" ' +
        '></div>'
    }}
/>
...


const s = StyleSheet.create({
    absolute: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
    },
    transparent: {
        backgroundColor: '#00000000'
    }
});

【讨论】：