React Native 的默认模态模糊答案

【问题标题】：Blur in default modal of React NativeReact Native 的默认模态模糊
【发布时间】：2019-03-03 10:35:25
【问题描述】：

我想在默认模式打开时模糊我的屏幕背景。

我找到了这个用于模糊的库https://github.com/react-native-community/react-native-blur

有人做到了吗？

我没有找到仅在模式上使用背景颜色的解决方案。

谢谢

【问题讨论】：

标签： react-native blur

【解决方案1】：

你不需要使用任何库来实现这种模糊效果。下面是在 Modal 打开时模糊背景图像的代码。

{/*blurRadius is initially 0 and 4 when modal active more the blurradius more is blur effect of image*/}

import React, { Component } from 'react';

import {
  Modal,
  Button,
  View,
  Text,
  StyleSheet,
  ImageBackground,
} from 'react-native';

export default class App extends Component {
  state = {
    isVisible: false,
  };
  render() {
    return (
      <ImageBackground
        style={styles.container}
        blurRadius={this.state.isVisible ? 4 : 0}
        source={require('./bgimage.jpeg')}>
        <Modal
          animationType={'fade'}
          transparent={true}
          visible={this.state.isVisible}
          onRequestClose={() => {
            console.log('Modal has been closed.');
          }}>
          <View style={styles.modal}>
            <Text style={styles.text}>Modal is open!</Text>
            <Button
              title="Click To Close Modal"
              onPress={() => {
                this.setState({ isVisible: !this.state.isVisible });
              }}
            />
          </View>
        </Modal>

        <Button
          title="Click To Open Modal"
          onPress={() => {
            this.setState({ isVisible: true });
          }}
        />
      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
  modal: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#606070',
    margin: 50,
  },
  text: {
    color: '#3f2949',
    marginTop: 10,
  },
});

【讨论】：

很好的解决方案，但想知道如何修复模态内内容的模糊效果。例如，snack.expo.io/BJEMKctIV
你能否详细说明一下，让我知道你到底想要什么屏幕。
所以上面的例子也会使文本（模态内的内容）变得模糊，我希望过度模糊而不是内容。
我同意@SubhenduKundu。尽管这是一个不错的解决方案，但我不喜欢模态框内的模糊内容。你有什么解决办法吗？
当我需要模糊当时我拥有的任何背景时会发生什么？它不需要是背景图片！

【解决方案2】：

我找到了解决方案。这适用于“react-native”：“0.57.8”，“react-native-blur”：“^3.2.2”

import React, { Component } from 'react';
import { BlurView } from 'react-native-blur';
import {
  StyleSheet,
  Text,
  View,
  findNodeHandle,
  Platform,
  Image,
} from 'react-native';

const styles = StyleSheet.create({
  title: {
    color: 'black',
    fontSize: 15,
  },
  absolute: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

export default class MyBlurredComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { viewRef: null };
  }

  onViewLoaded() {
    this.setState({ viewRef: findNodeHandle(this.viewRef) });
  }

  render() {
    return (
      <View>
        <View
          style={[
            styles.blurredView,
          ]}
          ref={(viewRef) => { this.viewRef = viewRef; }}
          onLayout={() => { this.onViewLoaded(); }}
        >

         <Modal visible={true} animationType="fade" transparent={true} onRequestClose={() => console.log('closed')}>
            <View>
              <Text>Text</Text>
            </View>
         </Modal>


        </View>
        {
          this.state.viewRef && <BlurView
            style={styles.absolute}
            viewRef={this.state.viewRef}
            blurType="light"
            blurAmount={10}
          />
        }
      </View>
    );
  }
}

【讨论】：

在安卓上能用吗？我的 android 应用程序因模糊组件而崩溃
@ViktorHardubej 当您在 android 中使用多个模糊视图时，此库已损坏

【解决方案3】：

你应该试试这个

<Modal animationType="slide" transparent={true} visible={modalVisible}>
          <ImageBackground style={styles.centeredView} source={{uri: `${env.AssetsBaseURL}/assets/images/mandir-bg-blur.png`}}>
            <View style={styles.modalView}>
               //your view
            </View>
          </ImageBackground>
        </Modal>


const styles = StyleSheet.create({
     
    centeredView: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
      position:"relative"
    },
    modalView: {
      width:"100%",
      position:"absolute",
      bottom:0,
      backgroundColor: "white",
      borderTopLeftRadius: 20,
      borderTopRightRadius: 20,
       
      shadowColor: "#000",
      shadowOffset: {
        width: 0,
        height: 2
      },
      shadowOpacity: 0.25,
      shadowRadius: 4,
      elevation: 5
    }
});

【讨论】：