如何在react native中添加模糊效果？

mmvthczy 于 2023-02-05 发布在 React

关注(0)|答案(2)|浏览(216)

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

react-native

来源：https://stackoverflow.com/questions/63510083/how-to-add-blur-effect-in-react-native

2条答案

按热度按时间

lzfw57am1#

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

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

赞(0）回复(0）举报 2023-02-05

mspsb9vt2#

您可以使用不透明度

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

})

赞(0）回复(0）举报 2023-02-05

我来回答

如何在react native中添加模糊效果？

2条答案

相关问题

热门标签

最新问答