#react-native #blur #react-native-blur
#react-native #размытие #react-native-blur
Вопрос:
Используя react-native-blur / react-native-community / blur, можно ли сделать размытый элемент белым?
Я попробовал следующее, но оно не полностью белое:
<BlurView
blurType={'xlight'}
blurAmount={100}
/>
Ответ №1:
Используйте react-native-blur и создайте компонент размытия, например
// components/Blur.js
import React, { Component } from "react";
import { Animated, View, Platform, Easing, StyleSheet } from "react-native";
import { BlurView } from "@react-native-community/blur";
import PropTypes from "prop-types";
import styles from "./styles";
export default class Blur extends Component {
constructor(props) {
super(props);
this.state = {
fadeAnimation: new Animated.Value(0),
};
}
static propTypes = {
title: PropTypes.string.isRequired,
};
fadeIn = () => {
Animated.timing(this.state.fadeAnimation, {
toValue: 1,
duration: 3000,
}).start();
};
fadeOut = () => {
Animated.timing(this.state.fadeAnimation, {
toValue: 0,
duration: 3000,
}).start();
};
componentDidMount() {
this.fadeIn();
}
render() {
return (
<BlurView
style={styles.blur}
blurType="light"
blurAmount={10}
reducedTransparencyFallbackColor="white"
/>
);
}
}
const styles = StyleSheet.create({
blur: {
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
justifyContent: "center",
backgroundColor: "rgba(100,100,100, 0.5)",
padding: 20,
},
});
Использование на экране, как
import { Blur } from "../components";
export default class App extends Component {
render() {
return (
<View style={{flex:1}}>
<!-- Render views which should be blur -->
<View>
.....
</View>
<!-- render blur view in the end -->
<Blur />
</View>
);
}
}
Комментарии:
1. Я ценю ваши усилия (хотя мне не нужна анимация, но я согласен, что это может быть полезно). Однако, похоже, он вообще не белый. Мой почти белый.
Ответ №2:
Если вы хотите, чтобы он был ПОЛНОСТЬЮ белым, то почему бы просто не установить цвет фона на белый и вообще не использовать размытие?