Как затемнить фон, когда модал отображается в реагирующем

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}

Answer 2

Используйте isVisible prop вместо visible. Обратитесь к документам за точными реквизитами.