如何在React Native中添加模糊效果？

Question

如何在 React Native 中为视图添加模糊，就像我们将其应用于图像或背景图像一样？如果视图具有使用 RGBA 的半透明背景，我也想为其添加模糊。

示例代码

<ImageBackground style={styles.bg}>
 <View style={styles.content} />
</ImageBackground>


const styles = StyleSheet.create({
  bg: {
   width: "100%",
   height: "100%"
  },
  content:{
    width: "70%",
    height: "70%",
    backgroundColor: "rgba(255,255,355,0.4)",
    alignSelf: "center"
  }
})

Answer 1

您可以使用不透明度

const styles = StyleSheet.create({
bg: {
 width: “100%”,
 height: “100%”, 
Opacity:0.5
},
content:{
  width: “70%”,
  height: “70%”,
  backgroundColor: “rgba(255,255,355,0.4)”,
  alignSelf: “center”
}


})

Answer 2

似乎您正在尝试模糊图像上的元素。一个好主意是拥有 2 个图像，第一个图像始终位于背景中，第二个图像将是图像上绝对位置视图的子级，并隐藏溢出。所以你只需要确保这个子图像与背景中的图像大小完全相同，并且位置与绝对定位的 View 相反。

import React, { useState } from 'react';
import { Image, View } from 'react-native';

import yourAsset from 'your/asset/folder/file.jpg';

const ImageBlur = () => {
  const [containerSize, setContainerSize] = useState({
    height: undefined,
    width: undefined,
  });

  return (
    <View
      onLayout={({ nativeEvent }) => {
        setContainerSize({
          width: nativeEvent.layout.width,
          height: nativeEvent.layout.height,
        });
      }}
      style={{
        position: 'relative',
        width: '100%',
        aspectRatio: 16 / 9,
      }}
    >
      <Image
        style={{ position: 'absolute', height: '100%', width: '100%' }}
        resizeMode="contain"
        source={yourAsset}
      />

      <View
        style={{
          backgroundColor: 'black',
          width: 100,
          height: 150,
          left: 100,
          top: 40,
          overflow: 'hidden',
        }}
      >
        <Image
          blurRadius={10}
          source={yourAsset}
          style={{
            width: containerSize.width,
            height: containerSize.height,
            left: -100,
            top: -40,
            opacity: 0.7,
          }}
          resizeMode="contain"
        />
        { any children here will be blurred }
      </View>
    </View>
  );
};

export default ImageBlur;

我还写了一篇 Medium post 解释了这个概念，并创建了一个 react-native-blur-view-image Github 存储库，用于展示我如何想出这个实现和一些使用示例。另外，还有性能测试反馈。

Answer 3

最简单的方法是执行以下操作：

import React, { Component } from 'react';
import { View, Text, ImageBackground, StyleSheet } from 'react-native';

const  BlurImage = () => {
        return (
            <ImageBackground source={require('your picture')} style={styles.ImageBackground}>
                <View style={styles.container}>
                    <Text style={styles.text}> CSS Tricks </Text>

                    <Text style={styles.text}>You can style your Text and View as you deem fit</Text>
                </View>
            </ImageBackground>
        );
}

export default BlurImage;

const styles = StyleSheet.create({
    ImageBackground: {
        flex: 1,
        width: null,
        height: null,
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba( 0, 0, 0, 0.6 )',
    },
    text: {
        color: 'white',
        fontSize: 24
    }
});