react-native - 当模态在本机反应中打开时，可触摸的突出显示不会变得模糊

Question

我有一个模态，当它打开时会模糊背景视图。但背景有一个可触摸的突出显示，它不会变得模糊。我的背景视图代码如下所示：

import React, {Component} from 'react';
import {View, Text, Image, StyleSheet, TouchableHighlight} from 'react-native';
import ModalContent from './modalView';


export default class Customquotesconfirmation extends Component {
    constructor(props) {
        super(props);
        this.state={
                    modalVisible: false,
                    phoneNumber: '9018938260',
                    clearTextInputValue: false
                }
                this.hideModal=this.hideModal.bind(this);
                this.showModal=this.showModal.bind(this);
    }

    showModal(modalState) {
        this.setState({ modalVisible: modalState});
    }

    hideModal(modalState) {
        this.setState({modalVisible: modalState});
    }

    render(){
        return(
            <View style={(this.state.modalVisible == true) ? styles.modalStyle : styles.modalCloseStyle }>
                <Text style={{textAlign:'center', color: '#097543', fontSize: 28, fontFamily: 'SourceSansPro-Black', marginTop:40, marginLeft:40, marginRight:40}}>Thank you for your interest!</Text>
                <Text style={{textAlign: 'center', color: '#666666',fontSize: 18, fontFamily: 'SourceSansPro-Black', marginLeft: 40, marginRight:40, marginTop:20 }}>Tap "Submit" and a lawn care professional will contact you with information about tailored service.</Text>
                <Image style={{width: 150, height:150, justifyContent:'center', alignItems:'center', marginLeft:150, marginTop: 40}} 
                        source={require('../../../assets/img/mobile_image.png')}></Image>

                <Text style={{marginLeft: 20, marginRight:20, marginTop:20, fontSize:8, color:'#666666'}}>By tapping "Submit" I provide my personal information including phone number and consent to: (1) receive autodialed calls, texts, and prerecorded messages from Trygreen regarding my account, including current and possible future services, customer service and billing; and (2) Trugreen's Privacy Policy and Terms and Conditions(including this arbitration provision).I understand that my consent is not required to purchase TruGreen services and that I may revoke consent for automated communications at any time.</Text>

                <TouchableHighlight
                onPress={() => {this.setState({ modalVisible: true})}}
                underlayColor="#FFFFFF">
                    <View style={styles.submitButtonStyle}>
                        <Text style={{color: '#FFFFFF', fontSize:25, textAlign: 'center',marginTop:10, fontStyle:'SourceSansPro-Bold'}}>Submit</Text>
                    </View>
                </TouchableHighlight>


{/* Modal Content */}
{
    this.state.modalVisible ?
     <ModalContent
        modalVisible={this.state.modalVisible}
        showModal={this.showModal}
        hideModal={this.hideModal}
        phoneNumber={this.state.phoneNumber}
         /> : null
}


            </View>
        );

    }
}

const styles = StyleSheet.create({
    modalStyle: {
        backgroundColor: 'rgba(0,0,0,0.5)', height:800
    },
    modalCloseStyle: {
        backgroundColor:'rgba(0,0,0,0)'
    },

    modalViewStyle:{
        flex: 1, flexDirection:'column' ,  marginTop:200, marginBottom:200, marginLeft:80, marginRight:80, height:220, backgroundColor:'#FFFFFF' 
    },
    submitButtonStyle: {
        width:200, height:50,  backgroundColor: '#ff9933', marginLeft:120, borderRadius:2, marginTop:20
    },
    blurButtonOnModalOpen: {
        width:200, height:50, marginLeft:120, borderRadius:2, marginTop:20, backgroundColor: 'rgba(0,0,0,0.5)',
    }



})

我的模态视图代码是：

import React, { Component } from 'react';
import {View, Text, TouchableHighlight, Modal, TextInput, StyleSheet} from 'react-native';

export default class ModalPopup extends Component {

    constructor(props) {
        super(props);
        this.state={
                    modalVisible: this.props.modalVisible,
                }
    }



    render() {
        return(
            <View style={{flex:1, alignItems:'center', justifyContent:'center'}}>            
            <Modal
        animationType='slide'
        visible={this.state.modalVisible}
        transparent={true}
        onRequestClose={() => {
          this.props.hideModal(false);
        }
        }
       >
        <View  style={ (this.state.modalVisible ? styles.modalViewStyle : null )}>


       <View  style={{ backgroundColor: '#32CD32', height: 100}}>
       <TouchableHighlight 
       onPress={() => {this.setState({ clearTextInputValue: true})}}
       underlayColor="##32CD32">
       <Text style={{ marginLeft:10, marginTop:10, color:'#FFFFFF', fontSize: 20}}> x </Text> 
       </TouchableHighlight>

       <Text style={{ marginLeft:60, color:'#FFFFFF', fontSize: 15, marginTop: -25}}> Contact Info </Text> 
       <Text style={{ marginLeft:40, marginTop:10, color:'#FFFFFF', fontSize: 20, fontStyle: 'SourceSansPro-Bold' }}> Phone Number </Text> 

       </View>
       <View style={{backgroundColor:'#FFFFFF'}}>
       <Text style={{ marginLeft:20, marginTop:10, color:'grey', fontSize: 20, fontStyle: 'SourceSansPro-Bold', marginRight:20 }}> Please confirm best contact number. </Text> 
       <TextInput 
       style={{fontSize:20, height:40, justifyContent:'center', borderTopWidth: 2, borderLeftWidth: 2, borderColor:'grey', width:200, height: 50, marginLeft: 20, marginTop: 20}}
       keyboardType= 'numeric'
       defaultValue={this.state.clearTextInputValue ? '' : this.props.phoneNumber}
       maxLength={10}></TextInput>

    <TouchableHighlight 
     onPress={() => {this.props.hideModal(false)}}
     underlayColor="#FFFFFF">
            <View style={{  width:200, height:50,  backgroundColor: '#ff9933', marginLeft:20, borderRadius:2, marginTop:20}}>
                <Text style={{color:'#FFFFFF', fontSize:25, textAlign: 'center',marginTop:10, fontStyle:'SourceSansPro-Bold'}}>Submit</Text>
            </View>
        </TouchableHighlight>
       </View>
                  </View>

        </Modal>
        </View>
        );
    }
}

const styles = StyleSheet.create({

    modalViewStyle:{
        flex: 1, flexDirection:'column' ,  marginTop:200, marginBottom:200, marginLeft:80, marginRight:80, height:220, backgroundColor:'#FFFFFF' 
    },
    submitButtonStyle: {
        width:200, height:50,  backgroundColor: '#ff9933', marginLeft:120, borderRadius:2, marginTop:20
    },




})

现在，当模式打开时，屏幕如下所示：

有人可以帮我解决这个问题。

标签： react-native