как сделать модальное закрытие всего экрана и в то же время реагировать на веб? - PullRequest
Новая
       10

как сделать модальное закрытие всего экрана и в то же время реагировать на веб?

0 голосов
/ 09 июля 2020

Я хочу, чтобы мой модальный экран был в центре экрана, занимал весь экран, будь то ноутбук или телефон, например, 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',
 
  }

1 Ответ

0 голосов
/ 09 июля 2020

Чтобы модальное окно покрыло весь экран, попробуйте следующий фрагмент: 

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

Примечание: для hp и wp - обратитесь к этому response-native-responseive-screen

Вернитесь ко мне, если вам понадобятся подробности.

...