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

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

我找到了解决办法。这是“React原生”：“0.57.8”，“React-自然-模糊”：“^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>
    );
  }
}

你应该试试这个

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

把BlurView组件直接放进Modal中，并赋予它下面的样式，我已经修复了它。不过，你应该注意，模糊的强度只影响iOS，Android有一个固定的模糊效果，无论intensity属性如何。

return (
    <View style={styles.mainWrap}>
      <StatusBar barStyle="default" />

      <View style={styles.contentWrap}>
        <Image
          style={{ width: 50, height: 50 }}
          source={{ uri: "https://facebook.github.io/react/img/logo_og.png" }}
        />
        <Text>{`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum facilisis arcu vitae odio volutpat, non efficitur metus congue. Donec porttitor eu nibh a viverra. Vestibulum efficitur ex eu enim elementum, feugiat vulputate turpis efficitur. Suspendisse id enim tempor, malesuada velit eget, ultrices nunc. Suspendisse lorem velit, maximus a sem et, consectetur aliquam ligula. Morbi mauris justo, faucibus sit amet iaculis at, finibus non erat. Suspendisse aliquet augue ex, at efficitur purus tincidunt sit amet. Vestibulum faucibus leo eget odio eleifend, ut facilisis eros euismod. Duis sit amet est felis. Fusce ullamcorper diam et urna facilisis, imperdiet dignissim arcu sagittis. Integer sed lacus tortor. Ut vel mauris vitae magna consectetur suscipit sit amet at nisi.`}</Text>
        <TouchableOpacity
          onPress={() => {
            this.launchModal(true);
          }}
        >
          <Text>{`Launch modal`}</Text>
        </TouchableOpacity>
      </View>

      <Modal
        visible={this.state.modalVisible}
        transparent={true}
        animationType="fade"
      >
        <BlurView blurType="light" style={styles.contentWrap}>
          <Image
            style={{ width: 300, height: 150 }}
            source={{
              uri: "http://facebook.github.io/origami/public/images/blog-hero.jpg",
            }}
          />

          <Text>{`This is the modal!`}</Text>

          <TouchableOpacity
            onPress={() => {
              this.launchModal(false);
            }}
          >
            <Text>{`Close modal`}</Text>
          </TouchableOpacity>
        </BlurView>
      </Modal>
    </View>
  );

只是添加backgroundColor: 'rgba(0,0,0,0.5)'到（style.modal）容器视图的样式