React Native-如何做像iOS或instagram这样的模糊视图？ [英] React Native - How to do Blur View like iOS or instagram?

问题描述

具有BLUR的背景透明性

是否可以在不使用背景图像的情况下模糊视图？我想在模式的背景模糊视图上方显示父内容。

Is it possible to blur view without using background Image? I want to show the parent content on top of the background blur view in modal.

与此类似：

尝试过 react-native-blur ：

Tried with react-native-blur :

它实际上使背景图像模糊。我想模糊显示模态背后的内容。

Its actually blurring the background image. I want to blur and show the content which is behind the modal.

与反应-native-overlay ：但没有变化。

Tried along with react-native-overlay : But no change.

推荐答案

好吧，如果您是

使用expo

using expo

然后您应该去看看此链接 这里

then you should go and check out this link here

其他如果您和我一样

谁喜欢使用' react-native init '并且想要一些基于模糊效果的视图，那么我为您准备了这个！

who loves to use 'react-native init' and want some blurry effect based views then i have this for you!

https://github.com/ voronianski / react-native-effects-view

一个很棒的图书馆

ld的用法非常简单，就像

it would be very simple to use it like

如果对话框打开，则渲染模糊视图，否则渲染简单，

"if the dialogbox is open then render The blur view else render simple",

这是基本使用方法的简单示例！

here is a simple example for basic how to use!

...imports
var EffectsView = require('react-native-effects-view');

var App = React.createClass({
renderVibrant() {
    return (
        <View>
            <Text style={styles.text}>Do you feel blurry??</Text>
        </View>
    );
},

render() {
    return (
        <EffectsView 
            style={styles.view} 
            blurStyle="dark" 
            vibrantContent={this.renderVibrant()}
        >
            <Image style={styles.bg} source={require('image!bg')} />
        </EffectsView>
    );
}
});

这篇关于React Native-如何做像iOS或instagram这样的模糊视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！