React Native - Как сделать Blur View как iOS или Instagram?

Question

Прозрачность фона с BLUR

Можно ли размыть изображение без использования фонового изображения? Я хочу показать родительский контент поверх фона размытия фона в модальный .

Подобный вид этого:

Пробовал с реакции-нативное размытие :

Это фактически размывает фоновое изображение. Я хочу размыть и показать контент, который стоит за модалом.

Пробовал вместе с response-native-overlay : Но без изменений.

Answer 1

хорошо, если вы

, используя expo

, тогда вы должны пойти и проверить эту ссылку здесь

иначе если вы похожи на меня

, который любит использовать ' реагировать-нативный 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>
    );
}
});