时间戳

首页 > 解决方案 > 如何使模态覆盖整个屏幕并同时响应网络？

reactjs - 如何使模态覆盖整个屏幕并同时响应网络？

问题描述

我希望我的模态位于屏幕中央，占据整个屏幕，无论是在笔记本电脑还是手机上，例如 ios、android，但我根本无法让它工作。我也想摆脱它周围的红色高光，但不知道怎么做。我还想设置“隐藏模式”按钮的样式，以便它可以在右侧显示为一个小十字。任何建议表示赞赏。 https://ibb.co/qB4jVVc


<View style = {styles.modal}>
                <Modal
                  visible={modalVisible}
                  transparent = {true}
                  onRequestClose={() => {
                    Alert.alert("Modal has been closed.");
                  }}
                >
                  <View style = {styles.container}>
                      <Text>Dear Customer, you have successfully paid for your trip from {startingLocation} to {endingLocation},
                       scheduled at {departure}{timeFormat}. Your receipt number is {Math.floor(100000 + Math.random() * 900000)}
                      </Text>
          
                        <TouchableHighlight
                          onPress={() => {
                            setModalVisible(!modalVisible);
                          }}
                        >
                          <Text>Hide Modal</Text>
                        </TouchableHighlight>
                  </View>
                </Modal>
              </View>

 modal : {

    backgroundColor:    "rgb(232,232,232)",
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
 
  }

标签： reactjsreact-nativeexpo

解决方案

要使模态覆盖整个屏幕，请尝试以下代码段，

<Modal
  style={{ margin: 0 }}>
  <View
     style={{ height: hp("100%"), width: wp("100%"), flex: 1 }}>
     ......write you layout here
  </View>
</Modal>

注意：对于 hp 和 wp - 请参阅此react-native-responsive-screen

如果您需要更多详细信息，请回复我。

推荐阅读