Блог

Используя react-native-blur / react-native-community / blur, можно ли сделать размытый элемент белым?

Я попробовал следующее, но оно не полностью белое:

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

Используйте 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>
    );
  }
}
 

Если вы хотите, чтобы он был ПОЛНОСТЬЮ белым, то почему бы просто не установить цвет фона на белый и вообще не использовать размытие?