المكون Modal في React Native

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

مثال

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

import React, { useState } from "react";
import {
  Alert,
  Modal,
  StyleSheet,
  Text,
  TouchableHighlight,
  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.");
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Hello World!</Text>

            <TouchableHighlight
              style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
              onPress={() => {
                setModalVisible(!modalVisible);
              }}
            >
              <Text style={styles.textStyle}>Hide Modal</Text>
            </TouchableHighlight>
          </View>
        </View>
      </Modal>

      <TouchableHighlight
        style={styles.openButton}
        onPress={() => {
          setModalVisible(true);
        }}
      >
        <Text style={styles.textStyle}>Show Modal</Text>
      </TouchableHighlight>
    </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: 3.84,
    elevation: 5
  },
  openButton: {
    backgroundColor: "#F194FF",
    borderRadius: 20,
    padding: 10,
    elevation: 2
  },
  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,
  TouchableHighlight,
  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.");
          }}
        >
          <View style={styles.centeredView}>
            <View style={styles.modalView}>
              <Text style={styles.modalText}>Hello World!</Text>

              <TouchableHighlight
                style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
                onPress={() => {
                  this.setModalVisible(!modalVisible);
                }}
              >
                <Text style={styles.textStyle}>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>

        <TouchableHighlight
          style={styles.openButton}
          onPress={() => {
            this.setModalVisible(true);
          }}
        >
          <Text style={styles.textStyle}>Show Modal</Text>
        </TouchableHighlight>
      </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: 3.84,
    elevation: 5
  },
  openButton: {
    backgroundColor: "#F194FF",
    borderRadius: 20,
    padding: 10,
    elevation: 2
  },
  textStyle: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center"
  }
});

export default App;

الخاصيات

`animated`

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

`animationType`

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

slide: يظهر من الأسفل.
fade: يتلاشى إلى داخل الواجهة.
none: يظهر دون حركةٍ، وهو الخيار الافتراضيّ.

النوع	مطلوب
قيمةٌ متعدّدةٌ ‪‎`‪(enum ('none', 'slide', 'fade'))`	لا

`hardwareAccelerated`

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

النوع	مطلوب	المنصة
قيمةٌ منطقيّةٌ (bool)	لا	Android

`onDismiss`

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

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

`onOrientationChange`

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

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

`onRequestClose`

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

النوع	مطلوب	المنصة
دالّةٌ (function)	نعم	Android, Platform.isTVOS
دالّةٌ (function)	لا	الأخرى

`onShow`

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

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

`presentationStyle`

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

fullScreen: يغطّي كامل الشّاشة.
pageSheet: يغطّي كامل عرض الواجهة العموديّة (portrait-width) في المنتصف (في الأجهزة الكبيرة فقط).
formSheet: يغطّي العرض الضّيّق للواجهة العموديّة (narrow-width) في المنتصف (في الأجهزة الكبيرة فقط).
overFullScreen: يغطّي كامل الشّاشة، لكنّه يسمح بالشّفافية (transparency).

والقيمة الافتراضيّة لهذه الخاصيّة هي إّمّا overFullScreen، أو fullScreen وذلك حسب الخاصيّة transparent.

النوع	مطلوب	المنصة
قيمة متعدّدة (enum (`'fullScreen', 'pageSheet', 'formSheet', 'overFullScreen'`))	لا	iOS

`statusBarTranslucent`

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

النوع	مطلوب	المنصة
قيمةٌ منطقيّةٌ (bool)	لا	Android

`supportedOrientations`

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

النوع	مطلوب	المنصة
مصفوفةٌ من القيم المتعدّدة (array of enum (`'portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'`))	لا	iOS

`transparent`

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

النوع	مطلوب
قيمة منطقية (bool)	لا

`visible`

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

النوع	مطلوب
قيمةٌ منطقيّةٌ (bool)	لا

مصادر

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