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

Question

如何用react-native制作模糊效果？喜欢 'background-image'

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

Answer 1

试试这个模糊的库。

依赖关系::编译'jp.wasabeef:blurry:2.0.2'

https://github.com/wasabeef/Blurry

Answer 2

安装react-native-blur：

npm install react-native-blur

import BlurView from 'react-native-blur';

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

Answer 3

现在你可以在没有任何库的情况下使用道具来做到这一点：blurRadius.

例如

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

说明: 数字(1)表示要在图像上应用的模糊量，数字越大，图像越模糊。

~~不幸的是，这不适用于 Android (RN 0.40.0)。尽管如此，对于那些只寻找 iOS 解决方案的人来说，它可能会有用。~~

编辑： 它现在似乎正在处理 Android。

Answer 4

如果您使用 CRNA 创建应用程序，即使用 expo.您可以使用 expo 的 BlurView。

import {BlurView} from 'expo';

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

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

Answer 5

尝试使用 '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

Answer 6

要在 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"

结果：

Answer 7

在最近的 React 本机版本 (0.57) 中，您可以使用 blurRadius，它在 iOS 和 Android 上都有效 http://facebook.github.io/react-native/docs/image#blurradius

Answer 8

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

Answer 9

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

expo install expo-blur Read more here
或 Read Here 用于裸反应本机应用程序的说明：

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/>
    })}

Answer 10

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

Answer 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'
    }
});

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

how to make the blur effect with react-native?

image

image-processing

blur

react-native