how to make the blur effect with react-native?

enter image description here

how to make the blur effect with react-native ? like 'background-image'

and i want to switch the effect 'blur' and 'none'，'none' means no blur effect

160015 次浏览
小开

试试这个模糊的图书馆。

依赖项: : 编译‘ jp.wasabeef: Fuzzy: 2.0.2’

Https://github.com/wasabeef/blurry

小开

安装 反应-本地-模糊:

npm install react-native-blur


import BlurView from 'react-native-blur';


...
<BlurView blurType="light" style={styles.blur}>
...
小开
最佳答案

现在，您可以在不使用任何库的情况下使用道具 模糊半径完成此操作。

例如

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

说明 : 数字(1)意味着你想在图像上应用的模糊量，数字越高，图像越模糊。

不幸的是，这还不能在 Android 上运行(RN 0.40.0)。尽管如此，对于那些只寻找 IOS解决方案的人来说，它可能是有用的。

编辑: 现在似乎可以在 Android 上运行了。

小开

如果你使用 CRNA 创建你的应用程序，也就是使用 expo。你可以从 expo 使用 BlurView。

import {BlurView} from 'expo';

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

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

小开

尝试使用“反应原生”中的{ ImageBacky}并像下面这样设置模糊半径 = { 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

小开

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

结果:

enter image description here

小开

在最近的 React 本地版本(0.57)中，你可以使用模糊半径，它可以同时在 iOS 和 Android 上工作 Http://facebook.github.io/react-native/docs/image#blurradius

小开

任何试图在本地机器人中模糊视频的人，在写这个问题答案的时候都不能使用可用的库。但是我通过使用 WebView 作为视频的框架来达到这个效果。编写一个小的 HTML 页面与视频标签和样式它根据您的要求，然后添加 CSS 过滤器属性与模糊作为它的价值，以视频标签的样式。创建一些 javascript 函数来播放和暂停视频(它们只是一行) ，您可以使用 WebView 的 injectJavaScript ()方法从本机代码调用这些视频。您可以使用 WebView 组件源探测的 html 属性将此 html 代码直接添加到 WebView。这显然是一个蹩脚的解决方案，而且不会像本地的那样快。如果您希望应用一些动画或者对视频布局做一些事情，那么可以使用本机代码中的 WebView 组件来完成，这与其他本机组件一样快。

小开

使用模糊半径道具。它预先附加到所有基于图像的组件在反应本机，如，图像，背景图像。从0到100的一个数值，表示半径百分比，其中10 = 10% ，100 = 100%

小开

你可以使用网络视图，它必须位于视图的上方，你想要模糊。

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

提交答案