如何在本机反应中添加模糊效果？

问题描述

如何在react native中向视图添加模糊，就像我们将其应用于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”
}


})

解决方法

您可以使用不透明性

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


})

,

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

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.6 )',text: {
        color: 'white',fontSize: 24
    }
});