المكون Modal في React Native

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

مثال

مثال لمكوِّن دالّة (Function Component)

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;

مثال لمكوِّن صنف (Class Component)

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}	لا	iOS

`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	لا

مصادر

صفحة Modal في توثيق React Native الرسميّ