React Native默认模式中的模糊

vecaoik1  于 2023-01-27  发布在  React
关注(0)|答案(5)|浏览(209)

我想模糊我的屏幕背景时,默认模态打开。
我为侠影https://github.com/react-native-community/react-native-blur找到了这个库
有人做到了吗?
我没有找到解决方案,只有一个背景色的模式。
谢谢

kyks70gy

kyks70gy1#

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

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

qxsslcnc2#

我找到了解决办法。这是“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>
    );
  }
}
nnt7mjpx

nnt7mjpx3#

你应该试试这个

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

zvms9eto

zvms9eto4#

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

laik7k3q5#

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

相关问题