Question

如何在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”
}


})

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

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

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 个答案: