الفرق بين المراجعتين ل"ReactNative/modal"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (مراجعة)
ط
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:المكون Modal في React Native}}</noinclude>
 
<noinclude>{{DISPLAYTITLE:المكون Modal في React Native}}</noinclude>
يُعدّ <code>Modal</code> أبسط طريقةٍ لإظهار محتوىً فوق واجهةٍ تحتويه.
+
يُعدّ <code>Modal</code> أبسط طريقةٍ لإظهار محتوًى في نافذة عائمة فوق واجهةٍ تحتويه.
 
__toc__
 
__toc__
 
== مثال ==
 
== مثال ==
  
* مثال لمكوِّن دالّة (Function Component)
+
* [https://snack.expo.dev/@hsoubwiki/modal-function-component مثال لمكوِّن دالّة (Function Component)]
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
import React, { useState } from "react";
 
import React, { useState } from "react";
import {
+
import { Alert, Modal, StyleSheet, Text, Pressable, View } from "react-native";
 Alert,
+
 
 Modal,
 
 StyleSheet,
 
 Text,
 
 TouchableHighlight,
 
 View
 
} from "react-native";
 
 
 
const App = () => {
 
const App = () => {
 const [modalVisible, setModalVisible] = useState(false);
+
  const [modalVisible, setModalVisible] = useState(false);
 return (
+
  return (
   <View style={styles.centeredView}>
+
    <View style={styles.centeredView}>
     <Modal
+
      <Modal
       animationType="slide"
+
        animationType="slide"
       transparent={true}
+
        transparent={true}
       visible={modalVisible}
+
        visible={modalVisible}
       onRequestClose={() => {
+
        onRequestClose={() => {
         Alert.alert("Modal has been closed.");
+
          Alert.alert("Modal has been closed.");
       }}
+
          setModalVisible(!modalVisible);
     >
+
        }}
       <View style={styles.centeredView}>
+
      >
         <View style={styles.modalView}>
+
        <View style={styles.centeredView}>
           <Text style={styles.modalText}>Hello World!</Text>
+
          <View style={styles.modalView}>
+
            <Text style={styles.modalText}>Hello World!</Text>
           <TouchableHighlight
+
            <Pressable
             style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
+
              style={[styles.button, styles.buttonClose]}
             onPress={() => {
+
              onPress={() => setModalVisible(!modalVisible)}
               setModalVisible(!modalVisible);
+
            >
             }}
+
              <Text style={styles.textStyle}>Hide Modal</Text>
           >
+
            </Pressable>
             <Text style={styles.textStyle}>Hide Modal</Text>
+
          </View>
           </TouchableHighlight>
+
        </View>
         </View>
+
      </Modal>
       </View>
+
      <Pressable
     </Modal>
+
        style={[styles.button, styles.buttonOpen]}
+
        onPress={() => setModalVisible(true)}
     <TouchableHighlight
+
      >
       style={styles.openButton}
+
        <Text style={styles.textStyle}>Show Modal</Text>
       onPress={() => {
+
      </Pressable>
         setModalVisible(true);
+
    </View>
       }}
 
     >
 
       <Text style={styles.textStyle}>Show Modal</Text>
 
     </TouchableHighlight>
 
   </View>
 
 
   );
 
   );
 
};
 
};
+
 
 
const styles = StyleSheet.create({
 
const styles = StyleSheet.create({
 centeredView: {
+
  centeredView: {
   flex: 1,
+
    flex: 1,
   justifyContent: "center",
+
    justifyContent: "center",
   alignItems: "center",
+
    alignItems: "center",
   marginTop: 22
+
    marginTop: 22
 
   },
 
   },
 modalView: {
+
  modalView: {
   margin: 20,
+
    margin: 20,
   backgroundColor: "white",
+
    backgroundColor: "white",
   borderRadius: 20,
+
    borderRadius: 20,
   padding: 35,
+
    padding: 35,
   alignItems: "center",
+
    alignItems: "center",
   shadowColor: "#000",
+
    shadowColor: "#000",
   shadowOffset: {
+
    shadowOffset: {
     width: 0,
+
      width: 0,
     height: 2
+
      height: 2
   },
+
    },
   shadowOpacity: 0.25,
+
    shadowOpacity: 0.25,
   shadowRadius: 3.84,
+
    shadowRadius: 4,
   elevation: 5
+
    elevation: 5
 
   },
 
   },
 openButton: {
+
  button: {
   backgroundColor: "#F194FF",
+
    borderRadius: 20,
   borderRadius: 20,
+
    padding: 10,
   padding: 10,
+
    elevation: 2
   elevation: 2
 
 
   },
 
   },
 textStyle: {
+
  buttonOpen: {
   color: "white",
+
    backgroundColor: "#F194FF",
   fontWeight: "bold",
 
   textAlign: "center"
 
 
   },
 
   },
 modalText: {
+
  buttonClose: {
   marginBottom: 15,
+
    backgroundColor: "#2196F3",
   textAlign: "center"
+
  },
 +
  textStyle: {
 +
    color: "white",
 +
    fontWeight: "bold",
 +
    textAlign: "center"
 +
  },
 +
  modalText: {
 +
    marginBottom: 15,
 +
    textAlign: "center"
 
   }
 
   }
 
});
 
});
+
 
export default App;  
+
export default App;
 
</syntaxhighlight>
 
</syntaxhighlight>
  
* مثال لمكوِّن صنف (Class Component)
+
* [https://snack.expo.dev/@hsoubwiki/modal-class-component مثال لمكوِّن صنف (Class Component)]
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
import React, { Component } from "react";
 
import React, { Component } from "react";
import {
+
import { Alert, Modal, StyleSheet, Text, Pressable, View } from "react-native";
 Alert,
+
 
 Modal,
 
 StyleSheet,
 
 Text,
 
 TouchableHighlight,
 
 View
 
} from "react-native";
 
 
 
class App extends Component {
 
class App extends Component {
 state = {
+
  state = {
   modalVisible: false
+
    modalVisible: false
 
   };
 
   };
+
 
 setModalVisible = (visible) => {
+
  setModalVisible = (visible) => {
   this.setState({ modalVisible: visible });
+
    this.setState({ modalVisible: visible });
 
   }
 
   }
+
 
 render() {
+
  render() {
   const { modalVisible } = this.state;
+
    const { modalVisible } = this.state;
   return (
+
    return (
     <View style={styles.centeredView}>
+
      <View style={styles.centeredView}>
       <Modal
+
        <Modal
         animationType="slide"
+
          animationType="slide"
         transparent={true}
+
          transparent={true}
         visible={modalVisible}
+
          visible={modalVisible}
         onRequestClose={() => {
+
          onRequestClose={() => {
           Alert.alert("Modal has been closed.");
+
            Alert.alert("Modal has been closed.");
         }}
+
            this.setModalVisible(!modalVisible);
       >
+
          }}
         <View style={styles.centeredView}>
+
        >
           <View style={styles.modalView}>
+
          <View style={styles.centeredView}>
             <Text style={styles.modalText}>Hello World!</Text>
+
            <View style={styles.modalView}>
+
              <Text style={styles.modalText}>Hello World!</Text>
             <TouchableHighlight
+
              <Pressable
               style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
+
                style={[styles.button, styles.buttonClose]}
               onPress={() => {
+
                onPress={() => this.setModalVisible(!modalVisible)}
                 this.setModalVisible(!modalVisible);
+
              >
               }}
+
                <Text style={styles.textStyle}>Hide Modal</Text>
             >
+
              </Pressable>
               <Text style={styles.textStyle}>Hide Modal</Text>
+
            </View>
             </TouchableHighlight>
+
          </View>
           </View>
+
        </Modal>
         </View>
+
        <Pressable
       </Modal>
+
          style={[styles.button, styles.buttonOpen]}
+
          onPress={() => this.setModalVisible(true)}
       <TouchableHighlight
+
        >
         style={styles.openButton}
+
          <Text style={styles.textStyle}>Show Modal</Text>
         onPress={() => {
+
        </Pressable>
           this.setModalVisible(true);
+
      </View>
         }}
+
    );
       >
 
         <Text style={styles.textStyle}>Show Modal</Text>
 
       </TouchableHighlight>
 
     </View>
 
   );
 
 
   }
 
   }
 
}
 
}
+
 
 
const styles = StyleSheet.create({
 
const styles = StyleSheet.create({
 centeredView: {
+
  centeredView: {
   flex: 1,
+
    flex: 1,
   justifyContent: "center",
+
    justifyContent: "center",
   alignItems: "center",
+
    alignItems: "center",
   marginTop: 22
+
    marginTop: 22
 +
  },
 +
  modalView: {
 +
    margin: 20,
 +
    backgroundColor: "white",
 +
    borderRadius: 20,
 +
    padding: 35,
 +
    alignItems: "center",
 +
    shadowColor: "#000",
 +
    shadowOffset: {
 +
      width: 0,
 +
      height: 2
 +
    },
 +
    shadowOpacity: 0.25,
 +
    shadowRadius: 4,
 +
    elevation: 5
 
   },
 
   },
 modalView: {
+
  button: {
   margin: 20,
+
    borderRadius: 20,
   backgroundColor: "white",
+
    padding: 10,
   borderRadius: 20,
+
    elevation: 2
   padding: 35,
 
   alignItems: "center",
 
   shadowColor: "#000",
 
   shadowOffset: {
 
     width: 0,
 
     height: 2
 
   },
 
   shadowOpacity: 0.25,
 
   shadowRadius: 3.84,
 
   elevation: 5
 
 
   },
 
   },
 openButton: {
+
  buttonOpen: {
   backgroundColor: "#F194FF",
+
    backgroundColor: "#F194FF",
   borderRadius: 20,
 
   padding: 10,
 
   elevation: 2
 
 
   },
 
   },
 textStyle: {
+
  buttonClose: {
   color: "white",
+
    backgroundColor: "#2196F3",
   fontWeight: "bold",
 
   textAlign: "center"
 
 
   },
 
   },
 modalText: {
+
  textStyle: {
   marginBottom: 15,
+
    color: "white",
   textAlign: "center"
+
    fontWeight: "bold",
 +
    textAlign: "center"
 +
  },
 +
  modalText: {
 +
    marginBottom: 15,
 +
    textAlign: "center"
 
   }
 
   }
 
});
 
});
+
 
export default App;  
+
export default App;
 
</syntaxhighlight>
 
</syntaxhighlight>
  
سطر 218: سطر 204:
 
!مطلوب
 
!مطلوب
 
|-
 
|-
|‪‎<code>('none', 'slide', 'fade')</code>
+
|‪‎('none', 'slide', 'fade')
 
|لا
 
|لا
 
|}
 
|}
سطر 226: سطر 212:
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
 +
!القيمة الافتراضية
 
!مطلوب
 
!مطلوب
 
!المنصة
 
!المنصة
 
|-
 
|-
 
|قيمةٌ منطقيّةٌ (bool)
 
|قيمةٌ منطقيّةٌ (bool)
 +
|false
 
|لا
 
|لا
 
|Android
 
|Android
سطر 267: سطر 255:
 
|دالّةٌ (function)
 
|دالّةٌ (function)
 
|نعم
 
|نعم
|Android, Platform.isTVOS
+
|Android, TVOS
 
|-
 
|-
 
|دالّةٌ (function)
 
|دالّةٌ (function)
 
|لا
 
|لا
|الأخرى
+
|iOS
 
|}
 
|}
  
سطر 285: سطر 273:
  
 
=== <code>presentationStyle</code> ===
 
=== <code>presentationStyle</code> ===
تتحكّم بطريقة ظهور <code>modal</code> (تستخدم عادةً على الأجهزة الكبيرة، مثل: أجهزة iPad، وأجهزة iPhone الكبيرة (plus-sized))، ويمكن زيارة <code>[https://developer.apple.com/reference/uikit/uimodalpresentationstyle uimodalpresentationstyle]</code> لمزيدٍ من التّفاصيل.  
+
تتحكّم بطريقة ظهور <code>modal</code>، تستخدم عادةً على الأجهزة الكبيرة، مثل: أجهزة iPad، وأجهزة iPhone الكبيرة (plus-sized)، ويمكن زيارة <code>[https://developer.apple.com/reference/uikit/uimodalpresentationstyle uimodalpresentationstyle]</code> لمزيدٍ من التّفاصيل.  
 +
 
 +
القيم الممكنة:
  
 
* <code>fullScreen</code>: يغطّي كامل الشّاشة.
 
* <code>fullScreen</code>: يغطّي كامل الشّاشة.
سطر 291: سطر 281:
 
* <code>formSheet</code>: يغطّي العرض الضّيّق للواجهة العموديّة (narrow-width) في المنتصف (في الأجهزة الكبيرة فقط).
 
* <code>formSheet</code>: يغطّي العرض الضّيّق للواجهة العموديّة (narrow-width) في المنتصف (في الأجهزة الكبيرة فقط).
 
* <code>overFullScreen</code>: يغطّي كامل الشّاشة، لكنّه يسمح بالشّفافية (transparency).
 
* <code>overFullScreen</code>: يغطّي كامل الشّاشة، لكنّه يسمح بالشّفافية (transparency).
 
والقيمة الافتراضيّة لهذه الخاصيّة هي إّمّا <code>overFullScreen</code>، أو <code>fullScreen</code> وذلك حسب الخاصيّة <code>transparent</code>.
 
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
 +
!القيمة الافتراضية
 
!مطلوب
 
!مطلوب
 
!المنصة
 
!المنصة
 
|-
 
|-
|‪ (<code>'fullScreen', 'pageSheet', 'formSheet', 'overFullScreen'</code>)
+
| rowspan="2" |‪ ('fullScreen', 'pageSheet', 'formSheet', 'overFullScreen')
|لا
+
|fullScreen إذا كانت transparent={false}
|iOS
+
| rowspan="2" |لا
 +
| rowspan="2" |iOS
 +
|-
 +
|overFullScreen إذا كانت transparent={true}
 
|}
 
|}
  
سطر 307: سطر 299:
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
 +
!القيمة الافتراضية
 
!مطلوب
 
!مطلوب
 
!المنصة
 
!المنصة
 
|-
 
|-
 
|قيمةٌ منطقيّةٌ (bool)
 
|قيمةٌ منطقيّةٌ (bool)
 +
|false
 
|لا
 
|لا
 
|Android
 
|Android
سطر 316: سطر 310:
  
 
=== <code>supportedOrientations</code> ===
 
=== <code>supportedOrientations</code> ===
تسمح بدوران <code>modal</code> وفق الاتّجاه المحدّد، لكنّها في منصة iOS لا تزال مقيّدةً بما هو محدّدٌ في حقل<code>UISupportedInterfaceOrientations</code> في الملف <code>Info.plist</code>، كما يتمّ تجاهلها -في منصة iOS أيضًا-عند استخدام <code>presentationStyle</code> في <code>pageSheet</code>، أو <code>formSheet</code>.
+
تسمح بدوران <code>modal</code> وفق الاتّجاه المحدّد، لكنّها في منصة iOS لا تزال مقيّدةً بما هو محدّدٌ في حقل <code>UISupportedInterfaceOrientations</code> في الملف <code>Info.plist</code>، كما يتمّ تجاهلها -في منصة iOS أيضًا-عند استخدام <code>presentationStyle</code> في <code>pageSheet</code>، أو <code>formSheet</code>.
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
 +
!القيمة الافتراضية
 
!مطلوب
 
!مطلوب
 
!المنصة
 
!المنصة
 
|-
 
|-
|(array of enum (<code>'portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'</code>)
+
|مصفوفة من القيمة التعدادية ('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right')
 +
|['portrait']
 
|لا
 
|لا
 
|iOS
 
|iOS
سطر 331: سطر 327:
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
 +
!القيمة الافتراضية
 
!مطلوب
 
!مطلوب
 
|-
 
|-
 
|قيمة منطقية (bool)
 
|قيمة منطقية (bool)
 +
|
 
|لا
 
|لا
 
|}
 
|}
سطر 341: سطر 339:
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
 +
!القيمة الافتراضية
 
!مطلوب
 
!مطلوب
 
|-
 
|-
 
|قيمةٌ منطقيّةٌ (bool)
 
|قيمةٌ منطقيّةٌ (bool)
 +
|true
 
|لا
 
|لا
 
|}
 
|}

مراجعة 13:24، 29 سبتمبر 2021

يُعدّ Modal أبسط طريقةٍ لإظهار محتوًى في نافذة عائمة فوق واجهةٍ تحتويه.

مثال

import React, { useState } from "react";
import { Alert, Modal, StyleSheet, Text, Pressable, View } from "react-native";

const App = () => {
  const [modalVisible, setModalVisible] = useState(false);
  return (
    <View style={styles.centeredView}>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert("Modal has been closed.");
          setModalVisible(!modalVisible);
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Hello World!</Text>
            <Pressable
              style={[styles.button, styles.buttonClose]}
              onPress={() => setModalVisible(!modalVisible)}
            >
              <Text style={styles.textStyle}>Hide Modal</Text>
            </Pressable>
          </View>
        </View>
      </Modal>
      <Pressable
        style={[styles.button, styles.buttonOpen]}
        onPress={() => setModalVisible(true)}
      >
        <Text style={styles.textStyle}>Show Modal</Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22
  },
  modalView: {
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 35,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5
  },
  button: {
    borderRadius: 20,
    padding: 10,
    elevation: 2
  },
  buttonOpen: {
    backgroundColor: "#F194FF",
  },
  buttonClose: {
    backgroundColor: "#2196F3",
  },
  textStyle: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center"
  }
});

export default App;
import React, { Component } from "react";
import { Alert, Modal, StyleSheet, Text, Pressable, View } from "react-native";

class App extends Component {
  state = {
    modalVisible: false
  };

  setModalVisible = (visible) => {
    this.setState({ modalVisible: visible });
  }

  render() {
    const { modalVisible } = this.state;
    return (
      <View style={styles.centeredView}>
        <Modal
          animationType="slide"
          transparent={true}
          visible={modalVisible}
          onRequestClose={() => {
            Alert.alert("Modal has been closed.");
            this.setModalVisible(!modalVisible);
          }}
        >
          <View style={styles.centeredView}>
            <View style={styles.modalView}>
              <Text style={styles.modalText}>Hello World!</Text>
              <Pressable
                style={[styles.button, styles.buttonClose]}
                onPress={() => this.setModalVisible(!modalVisible)}
              >
                <Text style={styles.textStyle}>Hide Modal</Text>
              </Pressable>
            </View>
          </View>
        </Modal>
        <Pressable
          style={[styles.button, styles.buttonOpen]}
          onPress={() => this.setModalVisible(true)}
        >
          <Text style={styles.textStyle}>Show Modal</Text>
        </Pressable>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22
  },
  modalView: {
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 35,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5
  },
  button: {
    borderRadius: 20,
    padding: 10,
    elevation: 2
  },
  buttonOpen: {
    backgroundColor: "#F194FF",
  },
  buttonClose: {
    backgroundColor: "#2196F3",
  },
  textStyle: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center"
  }
});

export default App;

الخاصيات

animated

مهملةٌ: استخدم الخاصيّة animationType بدلًا منها.

animationType

تتحكم بأسلوب حركة المكوّن modal.

  • slide: يظهر من الأسفل.
  • fade: يتلاشى إلى داخل الواجهة.
  • none: يظهر دون حركةٍ، وهو الخيار الافتراضيّ.
النوع مطلوب
‪‎('none', 'slide', 'fade') لا

hardwareAccelerated

تُستخدم للتحكّم في الحاجة إلى فرض المسرّع الرّسوميّ (hardware acceleration) للنّافذة الأساسيّة.

النوع القيمة الافتراضية مطلوب المنصة
قيمةٌ منطقيّةٌ (bool) false لا Android

onDismiss

تسمح بتمرير الدّالة التي ستُستدعى عند إلغاء modal.

النوع مطلوب المنصة
دالة لا iOS

onOrientationChange

تُستدعى عند تغيّر الاتّجاه أثناء عرض المكوّن modal، والاتّجاه المتاح إمّا portrait، أو landscape، كما يمكن استدعاؤها في بداية الإظهار بغضّ النّظر عن الاتجّاه الحاليّ.

النوع مطلوب المنصة
دالّة (function) لا iOS

onRequestClose

تُستدعى عندما يضغط المستخدم على مفتاح الرّجوع في أجهزة Android، أو على مفتاح القائمة الرّئيسيّة في أجهزة Apple TV، يجب الانتباه -بسبب هذه الخاصيّة المطلوبة- إلى عدم إطلاق أحداث BackHandler ما دام modal مفتوحًا.

النوع مطلوب المنصة
دالّةٌ (function) نعم Android, TVOS
دالّةٌ (function) لا iOS

onShow

تسمح بتمرير الدّالة التي ستُستدعى عند عرض المكوّن modal.

النوع مطلوب
دالّةٌ (function) لا

presentationStyle

تتحكّم بطريقة ظهور modal، تستخدم عادةً على الأجهزة الكبيرة، مثل: أجهزة iPad، وأجهزة iPhone الكبيرة (plus-sized)، ويمكن زيارة uimodalpresentationstyle لمزيدٍ من التّفاصيل.

القيم الممكنة:

  • fullScreen: يغطّي كامل الشّاشة.
  • pageSheet: يغطّي كامل عرض الواجهة العموديّة (portrait-width) في المنتصف (في الأجهزة الكبيرة فقط).
  • formSheet: يغطّي العرض الضّيّق للواجهة العموديّة (narrow-width) في المنتصف (في الأجهزة الكبيرة فقط).
  • overFullScreen: يغطّي كامل الشّاشة، لكنّه يسمح بالشّفافية (transparency).
النوع القيمة الافتراضية مطلوب المنصة
‪ ('fullScreen', 'pageSheet', 'formSheet', 'overFullScreen') fullScreen إذا كانت transparent={false} لا iOS
overFullScreen إذا كانت transparent={true}

statusBarTranslucent

تسمح بإظهار modal أسفل شريط الحالة (statusbar).

النوع القيمة الافتراضية مطلوب المنصة
قيمةٌ منطقيّةٌ (bool) false لا Android

supportedOrientations

تسمح بدوران modal وفق الاتّجاه المحدّد، لكنّها في منصة iOS لا تزال مقيّدةً بما هو محدّدٌ في حقل UISupportedInterfaceOrientations في الملف Info.plist، كما يتمّ تجاهلها -في منصة iOS أيضًا-عند استخدام presentationStyle في pageSheet، أو formSheet.

النوع القيمة الافتراضية مطلوب المنصة
مصفوفة من القيمة التعدادية ('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right') ['portrait'] لا iOS

transparent

تُستخدم ليُغطي modal كامل الواجهة، وتظهره فوق خلفيةٍ شفّافةٍ عندما تكون قيمتها true.

النوع القيمة الافتراضية مطلوب
قيمة منطقية (bool) لا

visible

تسمح بجعل modal ظاهرًا، أو مخفيًا.

النوع القيمة الافتراضية مطلوب
قيمةٌ منطقيّةٌ (bool) true لا

مصادر