在 React Native 的默认模式中模糊

Question

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

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

有没有人做到了？

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

谢谢

Answer 1

我找到了解决方案。这有效“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>
    );
  }
}