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