如何使用本机生成模糊效果?
image
image-processing
5
0

在此处输入图片说明

如何使用react-native产生模糊效果?就像“背景图片”

我想切换效果“模糊”和“无”,“无”表示没有模糊效果

参考资料:
Stack Overflow
收藏
评论
共 5 个回答
高赞 时间 活跃

要模糊和整个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>
    );
  }
}

// Deps:

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

结果:

在此处输入图片说明

收藏
评论

现在,您可以使用prop: blurRadius在没有任何库的情况下执行此操作

例如

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

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

不幸的是,这还不适用于Android(RN 0.40.0)。不过,这对于仅寻找iOS解决方案的人可能很有用。

编辑:它似乎现在在Android上工作。

收藏
评论

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

收藏
评论

如果您使用CRNA(即使用expo)创建了应用程序。您可以从expo使用BlurView。

import {BlurView} from 'expo';

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

tint ,它采用字符串值,即lightdefaultdark 。和intensity范围从1 to 100

收藏
评论

安装react-native-blur

npm install react-native-blur

import BlurView from 'react-native-blur';

...
<BlurView blurType="light" style={styles.blur}>
...
收藏
评论
新手导航
  • 社区规范
  • 提出问题
  • 进行投票
  • 个人资料
  • 优化问题
  • 回答问题

关于我们

常见问题

内容许可

联系我们

@2020 AskGo
京ICP备20001863号