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。正如docs中所述，您需要使用 isVisible 来显示模态，而不是visible。

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

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

Answer 2

使用isVisible道具代替visible。请参考docs获取确切的道具。

Answer 3

请注意，接受的答案是针对图书馆react-native-modal的。

用于调暗/模糊基本React Native组件modal的背景。

将您所有的内容包含在<Modal>下的<View>中，并向backgroundColor提供opacity和style，如下所示：

<Modal visible animationType="slide">
   <View style={{ backgroundColor: 'rgba(0, 255, 0, 0.5)'}}>
     {/* children components*/}
   </View>
 </Modal>

当模态以react-native显示时，如何调暗背景

3 个答案: