عرض مصدر ReactNative/drawerlayoutandroid

<noinclude>{{DISPLAYTITLE:المكون DrawerLayoutAndroid في React Native}}</noinclude> 
هو مكوّن React الّذي يغلّف المنصّة <code>DrawerLayout</code> (فقط على منصّة Android)، يُصيّر العرض أو الواجهة  المسحوبة Drawer (المستخدمة عادةً في التّنقّل) عن طريق الدّالّة <code>renderNavigationView</code> بحيث يكون الأبناء المباشِرون (direct children) هم الواجهة الرئيّسيّة (في مكان ظهور المحتوى)، ولا تظهر واجهة أو قائمة التّنقّل (navigation) على الشّاشة في البداية، بل يمكن سحبها من جانب الشّاشة المحدّد بالخاصيّة <code>drawerPosition</code>، كما يمكن تغيير عرضها عن طريق الخاصيّة <code>drawerWidth</code>.  
__toc__
== مثال ==
إليك المثال التالية ([https://snack.expo.dev/@hsoubwiki/drawerlayoutandroid-component-example تجربة حية]):<syntaxhighlight lang="javascript">
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; 
</syntaxhighlight>

== الخاصيات ==
يرث خاصّيّات المكوّن [[ReactNative/view#props|<code>View</code>]].

=== <code>drawerBackgroundColor</code> ===
تُحدّد لون خلفيّة الواجهة المسحوبة، والقيمة الافتراضيّة له <code>white</code>، كما يمكن تحديد الشّفافيّة (opacity) باستخدام نظام الّلون rgba كما يوضّح المثال التّالي:<syntaxhighlight lang="javascript">
return (
  <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />
);
</syntaxhighlight>
{| class="wikitable"
!النوع
!مطلوب
|-
|لون (<code>[[ReactNative/colors|color]]</code>)
|لا
|}

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

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

{| class="wikitable"
!النوع
!مطلوب
|-
|<code>('unlocked', 'locked-closed', 'locked-open')</code>
|لا
|}

=== <code>drawerPosition</code> ===
تُحدد طرف الشّاشة الذي ستنزلق (slide) منه الواجهة المسحوبة، والقيمة الافتراضيّة لهذه الخاصّية <code>left</code>.
{| class="wikitable"
!النوع
!مطلوب
|-
|<code>('left', 'right')</code>
|لا
|}

=== <code>drawerWidth</code> ===
تُحدد العرض الذي ستظهر به الواجهة المسحوبة بعد سحبها من حافّة نافذة الشّاشة. 
{| class="wikitable"
!النوع
!مطلوب
|-
|عدد (number)
|لا
|}

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

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

{| class="wikitable"
!النوع
!مطلوب
|-
|<code>('none', 'on-drag')</code>
|لا
|}

=== <code>onDrawerClose</code> ===
تُستدعى هذه الدّالّة عند إغلاق الواجهة المسحوبة.
{| class="wikitable"
!النوع
!مطلوب
|-
|دالة (function)
|لا
|}

=== <code>onDrawerOpen</code> ===
تُستدعى هذه الدّالّة عند فتح الواجهة المسحوبة.
{| class="wikitable"
!النوع
!مطلوب
|-
|دالة (function)
|لا
|}

=== <code>onDrawerSlide</code> ===
تُستدعى هذه الدّالّة عند التّفاعل مع الواجهة المسحوبة.
{| class="wikitable"
!النوع
!مطلوب
|-
|دالة (function)
|لا
|}

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

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

{| class="wikitable"
!النوع
!مطلوب
|-
|دالة (function)
|لا
|}

=== <code>renderNavigationView</code> ===
تُستخدم لإظهار الواجهة المسحوبة على جانب الشّاشة.
{| class="wikitable"
!النوع
!مطلوب
|-
|دالة (function)
|نعم
|}

=== <code>statusBarBackgroundColor</code> ===
تجعل الواجهة المسحوبة تأخذ كامل الشّاشة بعد أن يأخذ لون خلفية شريط الحالة لتسمح بفتحه فوق شريط الحالة، وتعمل هذه الخاصيّة فقط على الإصدار 21 وما بعده من الواجهة البرمجيّة API. 
{| class="wikitable"
!النوع
!مطلوب
|-
|لون (<code>[[ReactNative/colors|color]]</code>)
|لا
|}

== التوابع ==

=== <code>closeDrawer()‎</code> ===
يستعمَل لإغلاق الواجهة المسحوبة drawer.<syntaxhighlight lang="javascript">
closeDrawer();
</syntaxhighlight>
=== <code>openDrawer()‎</code> ===
يستعمَل لفتح الواجهة المسحوبة drawer.<syntaxhighlight lang="javascript">
openDrawer();
</syntaxhighlight>
== مصادر ==

* [https://facebook.github.io/react-native/docs/drawerlayoutandroid صفحة DrawerLayoutAndroid في توثيق React Native الرسميّ]

[[تصنيف:ReactNative]]
[[تصنيف:React Native Component]]