如何引用视图元素以查找节点句柄？

Question

我正在尝试创建一个弹出窗口，其中包含模糊视图。我正在使用react-native-blur创建模糊效果。显示以下错误会导致它不断崩溃的原因。

警告：道具类型失败：道具viewRef在BlurView中标记为必需，但是其值为null。

我正在使用react-native-blur。

import React, {Component} from 'react'
import {findNodeHandle, Switch, Dimensions, Platform, StyleSheet, Text, View, Button, TextInput, TouchableOpacity, Image, Animated, Easing, ScrollView} from 'react-native'
import Slider from '@react-native-community/slider'
import { createStackNavigator, createAppContainer } from "react-navigation"
import Dialog, { DialogContent, SlideAnimation } from 'react-native-popup-dialog'
import PropTypes from 'prop-types';
import SwitchToggle from 'react-native-switch-toggle'
import { BlurView } from "@react-native-community/blur";

screenWidth = Dimensions.get('screen').width
screenHeight = Dimensions.get('screen').height

var applianceName = 'Fan'

class ApplianceConfig extends Component<Props> {


  constructor(props) {
      super(props);
      this.state = {
        viewRef: null,
        visible: this.props.visible,
        switchAppliance: false,
        switchRepeat: false,

      };
  }

  dialogPopup () {
    this.setState({
      visible: this.props.visible
    })
    return (
      this.state.visible
    )
  }

  onPressAppliance = () => {
    this.setState({ switchAppliance: !this.state.switchAppliance });
  }

  onPressRepeat = () => {
    this.setState({ switchRepeat: !this.state.switchRepeat });
  }

  // viewLoaded = () => {
  //   this.setState({ viewRef: findNodeHandle(this.refs['main']) });
  // }
  //
  // componentWillMount () {
  //   this.setState({ viewRef: findNodeHandle(this.refs['main']) });
  // }
  onTextViewLoaded() {
    this.setState({ viewRef: findNodeHandle(this.viewRef) });
  }

  render() {
    return (

      <Dialog
        visible={this.state.visible}
        onTouchOutside={() => {
          this.setState({ visible: false });
        }}
        dialogStyle={{ borderRadius: 10, position: 'absolute', bottom: 0, backgroundColor: 'transparent' }}
        dialogAnimation={new SlideAnimation({
          slideFrom: 'bottom',
        })}
        containerStyle={{ justifyContent: 'flex-end' }}
      >
      <DialogContent>
      {(this.state.viewRef == null ? null : <BlurView
          style={dialog.absolute}
          viewRef={this.state.viewRef}
          blurType="light"
          blurAmount={10}
          blurRadius={5}/>
      )}
        <View style={dialog.container}
        ref={(viewRef) => { this.viewRef = viewRef; }}
        onLayout={() => { this.onTextViewLoaded(); }}>
        <View style={dialog.containerSubViews}>
          <Text style={dialog.sectionTitleFont}>{applianceName}</Text>
        </View>
        <View style={dialog.containerSubViews}>
          <Text style={dialog.titleFont}>Appliance</Text>
          <SwitchToggle
            onPress={() => this.onPressAppliance()}
            switchOn={this.state.switchAppliance}
            containerStyle={{
            width: 40,
            height: 20,
            borderRadius: 15,
            marginRight: 25,
            borderWidth: 1,
            borderColor: '#CC6666',
            padding: 4
          }}
            circleStyle={{
            width: 12,
            height: 12,
            borderRadius: 6,
            backgroundColor: '#CC6666', // rgb(102,134,205)
          }}
          circleColorOff='#CC6666'
          circleColorOn='#CC6666'
          />
        </View>
        <View style={dialog.containerSubViews}>
          <Text style={dialog.titleFont}>Speed</Text>
          <Slider
              style={{width: 200, height: 40, marginRight: 20}}
              minimumValue={0}
              maximumValue={100}
              minimumTrackTintColor="#CC6666"
              maximumTrackTintColor="transparent"
              thumbTintColor='#CC6666'
            />
        </View>

          <View style={dialog.containerSubViews}>
            <Text style={dialog.sectionTitleFont}>Automate</Text>
          </View>
          <View style={dialog.containerSubViews}>
              <Text style={dialog.titleFont}>Turn On Timer</Text>
              <TextInput style={{width: 100, height: 40, borderRadius: 5, marginRight: 20, backgroundColor: '#FAFAFA', borderColor: '#AAAAAA', borderWidth: 1, paddingHorizontal: 20}}/>
          </View>
          <View style={dialog.containerSubViews}>
              <Text style={dialog.titleFont}>Turn Off Timer</Text>
              <TextInput style={{width: 100, height: 40, borderRadius: 5, marginRight: 20, backgroundColor: '#FAFAFA', borderColor: '#AAAAAA', borderWidth: 1, paddingHorizontal: 20}}/>
          </View>
          <View style={dialog.containerSubViews}>
            <Text style={dialog.titleFont}>Repeat Everyday</Text>
            <SwitchToggle
              onPress={() => this.onPressRepeat()}
              switchOn={this.state.switchRepeat}
              containerStyle={{
              width: 40,
              height: 20,
              borderRadius: 15,
              marginRight: 25,
              borderWidth: 1,
              borderColor: '#CC6666',
              padding: 4
            }}
              circleStyle={{
              width: 12,
              height: 12,
              borderRadius: 6,
              backgroundColor: '#CC6666', // rgb(102,134,205)
            }}
            circleColorOff='#CC6666'
            circleColorOn='#CC6666'
            />
          </View>
          <View style={dialog.doneButtonView}>
            <TouchableOpacity style={dialog.doneButton}>
              <Text style={{fontSize: 15, fontWeight: 'bold', color: 'white'}}>Done</Text>
            </TouchableOpacity>
            <TouchableOpacity style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
              <Text style={{fontSize: 15, fontWeight: 'bold', color: '#CC6666'}}>Cancel</Text>
            </TouchableOpacity>
          </View>
        </View>

      </DialogContent>
    </Dialog>
    )
  }
}

ApplianceConfig.propTypes = {
  visible: PropTypes.bool
}

const dialog = StyleSheet.create({
  container: {
    backgroundColor: 'rgba(255, 255, 255, 1.0)',
    flex: 0,
    justifyContent: 'flex-start',
    alignItems: 'center',
    height: 0.75 * screenHeight,
    width: screenWidth,
    borderRadius: 10
  },
  containerSubViews: {
    flex: 0,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    height: 60,
    width: screenWidth
  },
  titleFont: {
    marginLeft: 20,
    fontSize: 16,
    fontWeight: '500'
  },
  doneButton: {
    height: 50,
    borderRadius: 25,
    width: '50%',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#CC6666',
    marginLeft: 30
  },
  doneButtonView: {
    flex: 0,
    width: screenWidth,
    height:50,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: 'transparent',
    marginTop: 20
  },
  sectionTitleFont: {
      marginLeft: 20,
      fontSize: 20,
      fontWeight: '500',
      color: 'black',
  },
  applianceTitle: {
    flex: 0,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    height: 60,
    width: screenWidth
  },
  absolute: {
   position: "absolute",
   top: 0,
   left: 0,
   bottom: 0,
   right: 0
 }
})

module.exports = ApplianceConfig;

我想解决此问题。如何模糊背景视图？也许你们可以建议其他图书馆。预先感谢。