المكون 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: يظهر دون حركةٍ، وهو الخيار الافتراضيّ.
النوع مطلوب
‪‎('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.

النوع مطلوب المنصة
‪ ('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) لا

مصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=ReactNative/modal&oldid=30332»