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

Question

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

我尝试了以下方法，但它并不完全是白色的：

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

标签： react-nativeblurreact-native-blur

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