Question

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

我希望切换效果'模糊'和'无'，'无'表示没有模糊效果

Answer 1

现在，您可以在没有使用道具的任何库的情况下执行此操作： blurRadius 。

E.g

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

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

~~不幸的是，这还不适用于Android（RN 0.40.0）。然而，对于那些只寻找 iOS 解决方案的人来说，这可能很有用。~~

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

Answer 2

要模糊react-native中的整个视图，您可以使用react-native-blur并按照以下方式应用它：

import React, { Component } from 'react';
import { BlurView } from 'react-native-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>
    );
  }
}

// Deps：

 "react-native": "0.53.3",
 "react-native-blur": "^3.2.2"

结果：

Answer 3

安装react-native-blur：

npm install react-native-blur

import BlurView from 'react-native-blur';

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

Answer 4

如果您使用CRNA创建了应用，即使用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 android中模糊视频视图的人都无法使用编写此答案时可用的库来做到这一点。但是我通过使用WebView作为视频框架来达到这种效果。编写一个带有视频标签的HTML小页面，并根据您的要求对其进行样式设置，然后将具有模糊值的CSS过滤器属性添加到视频标签的样式中。还创建一些javascript函数来播放和暂停视频（它们只是一个衬里），您可以使用WebView的injectJavaScript（）方法从react-native代码中调用该视频。您可以使用WebView组件的源探针的html属性将该html代码直接添加到WebView。这显然是一个很棘手的解决方案，它不会像本机解决方案那样快。如果要应用某些动画或对视频布局进行某些操作，则可以使用react-native代码中的WebView组件来完成，这与其他react-native组件一样快。

Answer 7

试试这个模糊的图书馆。

dependencies :: compile'jp.wasabeef：blurry：2.0.2'

https://github.com/wasabeef/Blurry

Answer 8

您可以使用此库来获得所需的效果。 https://github.com/react-native-fellowship/react-native-blur

Answer 9

我发现这个npm看起来非常好 react-native-blur

usage

Answer 10

使用最新的React本机版本（0.57），您可以使用blurRadius，它可以在iOS和Android上运行 http://facebook.github.io/react-native/docs/image#blurradius

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

10 个答案: