React native 在React Native的默认模式下模糊

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

我为blur找到了这个图书馆

有人做到了吗

我找不到仅在模式上使用背景色的解决方案

---

谢谢

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

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

{/*blurRadius最初为0和4，当模态激活越多，blurRadius越是图像的模糊效果*/}
从“React”导入React，{Component}；
进口{
情态动词
按钮
看法
文本，
样式表，
图像背景，
}从“反应本机”；
导出默认类应用程序扩展组件{
状态={
isVisible:false，
};
render（）{
返回(
{
console.log（'模式已关闭'）；
}}>
模态是开放的！
{
this.setState（{isVisible:！this.state.isVisible}）；
}}
/>
{
this.setState（{isVisible:true}）；
}}
/>
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”，
背景颜色：“rgba（0,0,0,0.5）”，
},
模态：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”，
背景颜色：'#606070'，
差额：50，
},
正文：{
颜色：“#3f2949”，
玛金托普：10，
},
});

我找到了解决方案。这适用于“反应本机”：“0.57.8”，“反应本机模糊”：“^3.2.2”

import React，{Component}来自'React'；
从“react native blur”导入{BlurView}；
进口{
样式表，
文本，
看法
findNodeHandle，
平台，
形象,，
}从“反应本机”；
const styles=StyleSheet.create({
标题：{
颜色：'黑色'，
尺寸：15，
},
绝对：{
位置：'绝对'，
排名：0，
左:0,，
底部：0，
右:0,，
},
});
导出默认类MyBlurredComponent扩展组件{
建造师（道具）{
超级（道具）；
this.state={viewRef:null}；
}
onViewLoaded（）{
this.setState（{viewRef:findNodeHandle（this.viewRef）}）；
}
render（）{
返回(
{this.viewRef=viewRef；}}
onLayout={（）=>{this.onViewLoaded（）；}}
>
console.log（'closed'）}>
正文
{
this.state.viewRef&&
}
);
}
}

很好的解决方案，但是想知道如何修复模式中内容的模糊效果。例如，你能详细说明一下，让我知道你在屏幕上到底想要什么。因此，上面的例子会使文本（模式中的内容）变得模糊，我希望过度模糊而不是内容。我同意@subhandukundu。尽管这是一个很好的解决方案，但我不喜欢modal中模糊的内容。你有什么解决办法吗？当我需要模糊我当时的背景时会发生什么？它不需要是一个背景图像！它在android上工作吗？我的android应用程序因模糊而崩溃component@ViktorHardubej在android中使用多模糊视图时，此库已损坏

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