المكون DrawerLayoutAndroid في React Native

هو مكوّن React الّذي يغلّف المنصّة DrawerLayout (فقط على منصّة Android)، يُصيّر العرض أو الواجهة المسحوبة Drawer (المستخدمة عادةً في التّنقّل) عن طريق الدّالّة renderNavigationView بحيث يكون الأبناء المباشِرون (direct children) هم الواجهة الرئيّسيّة (في مكان ظهور المحتوى)، ولا تظهر واجهة أو قائمة التّنقّل (navigation) على الشّاشة في البداية، بل يمكن سحبها من جانب الشّاشة المحدّد بالخاصيّة drawerPosition، كما يمكن تغيير عرضها عن طريق الخاصيّة drawerWidth.

مثال

إليك المثال التالية (تجربة حية):

import React, { useState } from "react";
import { Button, DrawerLayoutAndroid, Text, StyleSheet, View } from "react-native";
​
const App = () => {
  const [drawerPosition, setDrawerPosition] = useState("left");
  const changeDrawerPosition = () => {
    if (drawerPosition === "left") {
      setDrawerPosition("right");
    } else {
      setDrawerPosition("left");
    }
  };
​
  const navigationView = (
    <View style={styles.navigationContainer}>
      <Text style={{ margin: 10, fontSize: 15 }}>I'm in the Drawer!</Text>
    </View>
  );
​
  return (
    <DrawerLayoutAndroid
      drawerWidth={300}
      drawerPosition={drawerPosition}
      renderNavigationView={() => navigationView}
    >
      <View style={styles.container}>
        <Text style={{ margin: 10, fontSize: 15 }}>
          DrawerLayoutAndroid example
        </Text>
        <Button
          title="Change Drawer Position"
          onPress={() => changeDrawerPosition()}
        />
        <Text style={{ margin: 10, fontSize: 15 }}>
          Drawer on the {drawerPosition}! Swipe from the side to see!
        </Text>
      </View>
    </DrawerLayoutAndroid>
  );
};
​
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    paddingTop: 50,
    backgroundColor: "#ecf0f1",
    padding: 8
  },
  navigationContainer: {
    flex: 1,
    paddingTop: 50,
    backgroundColor: "#fff",
    padding: 8
  }
});
​
export default App;

الخاصيات

يرث خاصّيّات المكوّن View.

drawerBackgroundColor

تُحدّد لون خلفيّة الواجهة المسحوبة، والقيمة الافتراضيّة له white، كما يمكن تحديد الشّفافيّة (opacity) باستخدام نظام الّلون rgba كما يوضّح المثال التّالي:

return (
  <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />
);

النوع	مطلوب
لون (color)	لا

drawerLockMode

تُحدّد وضع القفل (lock mode) للواجهة المسحوبة، ولها حالاتٌ ثلاثٌ:

• unlocked (غير مقفل): وهو الوضع الافتراضيّ، وتعني أنّ الواجهة المسحوبة تستجيب (في فتح والإغلاق) لإيماءات اللّمس (touch gestures).
• locked-closed (مقفل ومغلق): وتعني أنّ الواجهة المسحوبة ستبقى مغلقة ولا تستجيب لإيماءات اللّمس.
• locked-open (مقفل ومفتوح): وتعني أنّ الواجهة المسحوبة ستبقى مفتوحة ولا تستجيب لإيماءات اللّمس، ويمكن برمجيًا إبقاءها مفتوحة أو مغلقة عن طريق التّوابع (openDrawer/closeDrawer).

النوع	مطلوب
('unlocked', 'locked-closed', 'locked-open')	لا

drawerPosition

تُحدد طرف الشّاشة الذي ستنزلق (slide) منه الواجهة المسحوبة، والقيمة الافتراضيّة لهذه الخاصّية left.

النوع	مطلوب
('left', 'right')	لا

drawerWidth

تُحدد العرض الذي ستظهر به الواجهة المسحوبة بعد سحبها من حافّة نافذة الشّاشة.

النوع	مطلوب
عدد (number)	لا

keyboardDismissMode

تُحدّد فيما إذا كانت لوحة المفاتيح ستعطّل أثناء السّحب (drag)، ولها حالتان:

• none (الوضع الافتراضي): لا يعطّل السّحب لوحة المفاتيح.
• on-drag: تُعطَّل لوحة المفاتيح عند بدء السّحب.

النوع	مطلوب
('none', 'on-drag')	لا

onDrawerClose

تُستدعى هذه الدّالّة عند إغلاق الواجهة المسحوبة.

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

onDrawerOpen

تُستدعى هذه الدّالّة عند فتح الواجهة المسحوبة.

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

onDrawerSlide

تُستدعى هذه الدّالّة عند التّفاعل مع الواجهة المسحوبة.

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

onDrawerStateChanged

تُستدعى هذه الدّالّة عند تغّير حالة الواجهة المسحوبة، ولها حالاتٌ ثلاثٌ:

• idle (السّكون): يعني عدم وجود أيّ تفاعل مع الواجهة المسحوبة حاليًّا.
• dragging (السحب): يعني وجود تفاعل مع الواجهة المسحوبة حاليًّا.
• settling (الاستقرار): يعني أنّه كان هنالك تفاعل مع الواجهة المسحوبة، وأنّه ينهي الآن حركة الفتح أو الإغلاق.

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

renderNavigationView

تُستخدم لإظهار الواجهة المسحوبة على جانب الشّاشة.

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

statusBarBackgroundColor

تجعل الواجهة المسحوبة تأخذ كامل الشّاشة بعد أن يأخذ لون خلفية شريط الحالة لتسمح بفتحه فوق شريط الحالة، وتعمل هذه الخاصيّة فقط على الإصدار 21 وما بعده من الواجهة البرمجيّة API.

النوع	مطلوب
لون (color)	لا

التوابع

closeDrawer()‎

يستعمَل لإغلاق الواجهة المسحوبة drawer.

closeDrawer();

openDrawer()‎

يستعمَل لفتح الواجهة المسحوبة drawer.

openDrawer();

مصادر

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