css - 当模态在本机反应中打开时，我想模糊背景

Question

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

提前致谢

Answer 1

使用反应原生模糊

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

Answer 2

我使用通用模糊 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);