ReactNative/modal

يُعدّ 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}

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 الرسميّ