在 React Native 的默认模态中模糊

Question

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

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

有人做到了吗？

我找不到只有模态背景颜色的解决方案。

谢谢

Answer 1

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

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

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

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

Answer 4

只需将 backgroundColor: 'rgba(0,0,0,0.5)' 添加到 (style.modal) 容器视图的样式中

在 React Native 的默认模态中模糊

Blur in default modal of React Native

blur

react-native