【问题标题】:React Native - How to do Blur View like iOS or instagram?React Native - 如何像 iOS 或 instagram 一样进行模糊视图?
【发布时间】:2018-10-23 08:13:28
【问题描述】:

使用 BLUR 实现背景透明度

是否可以在不使用背景图像的情况下模糊视图?我想在modal背景模糊视图之上显示父内容

类似的:

试过react-native-blur

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

react-native-overlay 一起尝试过:但没有任何变化。

【问题讨论】:

标签: react-native view blur blurry uiblureffect


【解决方案1】:

如果你是的话

使用博览会

那么你应该去看看这个链接here

否则如果你和我一样

喜欢使用 'react-native init' 并且想要一些基于模糊效果的视图的人,那么我有这个给你!

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

一个很棒的图书馆

使用起来会很简单

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

这里有一个简单的例子来说明基本的使用方法!

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

【讨论】:

猜你喜欢
  • 2015-06-10
  • 1970-01-01
  • 2023-01-23
  • 2018-02-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多