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).

النوع	مطلوب
قيمة متعدّدة ‪(enum('unlocked', 'locked-closed', 'locked-open'))	لا

drawerPosition

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

النوع	مطلوب
قيمة متعددة ‪(enum('left', 'right'))	لا

drawerWidth

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

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

keyboardDismissMode

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

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

النوع	مطلوب
قيمة متعدّدة‪ (enum('none', 'on-drag'))	لا

onDrawerClose

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

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

onDrawerOpen

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

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

onDrawerSlide

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

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

onDrawerStateChanged

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

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

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

renderNavigationView

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

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

statusBarBackgroundColor

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

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

التوابع

‪closeDrawer()

closeDrawer();

يستعمَل لإغلاق العرض المسحوب.

‪openDrawer()

openDrawer();

يستعمَل لفتح العرض المسحوب.

مصادر

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