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

【问题标题】：How to add blur effect in react native?如何在 React Native 中添加模糊效果？
【发布时间】：2020-08-20 17:13:11
【问题描述】：

如何在 react native 中为 View 添加模糊，就像我们将其应用于 Image 或 BackgroundImage 一样。如果视图具有使用 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”
}


})

【问题讨论】：

标签： react-native react-native-android react-native-ios react-native-flatlist react-native-navigation

【解决方案1】：

最简单的方法是：

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

【讨论】：

【解决方案2】：

你可以使用不透明度

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”
}


})

【讨论】：