当 Modal 在 react-native 中显示时如何使背景变暗

Question

我已经按预期获得了模态，但我无法使背景变暗。

我也尝试过，backdropColor = {'green'} backdropOpacity = {1}但背景仍然存在。我需要这方面的帮助。下面是我的代码：

import Modal from "react-native-modal";
    <View 
          style={styles.MainContainer}>
            <Modal
                backdropColor={'green'}
                backdropOpacity= {1}
                animationType={"slide"}
                visible={this.state.ModalVisibleStatus}
                onRequestClose={ ()=>{ this.ShowModalFunction(!this.state.ModalVisibleStatus)}}>

              <View style={{ flex:1, justifyContent: 'center', alignItems: 'center' }}>
                <View style={styles.ModalInsideView}>
                  <Text 
                      style={styles.TextStyle}>
                      Enter the Number of Tickets to be Printed. 
                   </Text>

                    <NumberSpinner
                    packageCount={this.state.tickets} min={0} max={20}
                    onChange={this.ticketsCount}
                  />

                 <Button  
                      title="Print Tickets" 
                       onPress={() => { this.ShowModalFunction(!this.state.ModalVisibleStatus)}}/>
              </View>
            </View>
          </Modal>

Answer 1

您正在使用错误的道具来触发Modal. 如文档中所述，您需要使用isVisible来显示模态而不是visible.

因此backdropColor，backdropOpacity为了工作，您需要将代码更改为

<Modal
       backdropColor={'green'}
       backdropOpacity= {1}
       animationType={"slide"}
       isVisible={this.state.ModalVisibleStatus}