Question

当默认模式打开时，我想模糊屏幕背景。

我发现这个库很模糊https://github.com/react-native-community/react-native-blur

有人做到了吗？

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

谢谢

Answer 1

您无需使用任何库即可实现这种模糊效果。下面是在Modal打开时使背景图像模糊的代码。

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

在React Native的默认模式中模糊

2 个答案: