我想在反应原生打开模态时模糊背景答案

【问题标题】：I want to blurr the backgorund when modal is opened in react native我想在反应原生打开模态时模糊背景
【发布时间】：2020-11-16 15:26:02
【问题描述】：

假设我在 react-native 视图中有一个模态框，并且每当我打开模态框时，我想模糊或更改背景视图的颜色，只关注模态框。

提前致谢

【问题讨论】：

你有什么尝试吗？
stackoverflow 上有一些可用的解决方案，但对我没有任何帮助

标签： css react-native stylesheet modal-view

【解决方案1】：

使用react-native-blur

import React, { Component } from "react";
import { Animated, View, Platform, Easing, StyleSheet} from "react-native";
import { BlurView } from "@react-native-community/blur"; 

export default class Blur extends Component {

  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,

    // zIndex: 10,
    // opacity: 0.5,
  },
});

【讨论】：

【解决方案2】：

我使用universal blur HOC，它修复了一些 iOS\Android 错误

import React from 'react';
import { Button, Text, View } from 'react-native';
import { withBlurModal } from './MyWithBlurModal';

const MyModalContent = ({ openModal, closeModal }) => (
  <View>
    <Text>MyModalContent</Text>
    <Button title="Close modal" onPress={closeModal} />
  </View>
);

const MyScreen = ({ openModal, closeModal, blurTargetRef }) => (
  <View
    // ref need for Android to indicate what part of View need to blur
    ref={blurTargetRef}
  >
    <Button title="Open modal" onPress={openModal} />
  </View>
);

const Screen = withBlurModal(MyModalContent)(MyScreen);

【讨论】：