是否可以在react native中将模糊项目设置为完全白色

Question

使用react native blury/react native-community/blur，是否可以将模糊项设置为白色？

我试过以下几种，但不是完全白色的：

<BlurView
blurType={'xlight'}
blurAmount={100}
/>

Answer 1

使用react原生模糊并创建类似的模糊组件

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

Answer 2

如果你想让它完全是白色的，那么为什么不把背景颜色设置为白色，并且根本不使用模糊呢？