الفرق بين المراجعتين ل"ReactNative/drawerlayoutandroid"
رقية-بورية (نقاش | مساهمات) ط (مراجعة) |
جميل-بيلوني (نقاش | مساهمات) ط (مراجعة) |
||
سطر 1: | سطر 1: | ||
− | <noinclude>{{DISPLAYTITLE:DrawerLayoutAndroid في React Native}}</noinclude> | + | <noinclude>{{DISPLAYTITLE:المكون DrawerLayoutAndroid في React Native}}</noinclude> |
− | هو مكوّن React الّذي يغلّف المنصّة <code>DrawerLayout</code> (فقط على منصّة Android)، يُصيّر العرض | + | هو مكوّن React الّذي يغلّف المنصّة <code>DrawerLayout</code> (فقط على منصّة Android)، يُصيّر العرض أو الواجهة المسحوبة Drawer (المستخدمة عادةً في التّنقّل) عن طريق الدّالّة <code>renderNavigationView</code> بحيث يكون الأبناء المباشِرون (direct children) هم الواجهة الرئيّسيّة (في مكان ظهور المحتوى)، ولا تظهر واجهة أو قائمة التّنقّل (navigation) على الشّاشة في البداية، بل يمكن سحبها من جانب الشّاشة المحدّد بالخاصيّة <code>drawerPosition</code>، كما يمكن تغيير عرضها عن طريق الخاصيّة <code>drawerWidth</code>. |
__toc__ | __toc__ | ||
== مثال == | == مثال == | ||
− | <syntaxhighlight lang="javascript"> | + | إليك المثال التالية ([https://snack.expo.dev/@hsoubwiki/drawerlayoutandroid-component-example تجربة حية]):<syntaxhighlight lang="javascript"> |
import React, { useState } from "react"; | import React, { useState } from "react"; | ||
import { Button, DrawerLayoutAndroid, Text, StyleSheet, View } from "react-native"; | import { Button, DrawerLayoutAndroid, Text, StyleSheet, View } from "react-native"; | ||
سطر 66: | سطر 66: | ||
== الخاصيات == | == الخاصيات == | ||
− | + | يرث خاصّيّات المكوّن [[ReactNative/view#props|<code>View</code>]]. | |
=== <code>drawerBackgroundColor</code> === | === <code>drawerBackgroundColor</code> === | ||
− | تُحدّد لون خلفيّة | + | تُحدّد لون خلفيّة الواجهة المسحوبة، والقيمة الافتراضيّة له <code>white</code>، كما يمكن تحديد الشّفافيّة (opacity) باستخدام نظام الّلون rgba كما يوضّح المثال التّالي:<syntaxhighlight lang="javascript"> |
return ( | return ( | ||
<DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" /> | <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" /> | ||
سطر 83: | سطر 83: | ||
=== <code>drawerLockMode</code> === | === <code>drawerLockMode</code> === | ||
− | تُحدّد وضع القفل (lock mode) | + | تُحدّد وضع القفل (lock mode) للواجهة المسحوبة، ولها حالاتٌ ثلاثٌ: |
− | * unlocked (غير مقفل): وهو الوضع الافتراضيّ، وتعني أنّ | + | * unlocked (غير مقفل): وهو الوضع الافتراضيّ، وتعني أنّ الواجهة المسحوبة تستجيب (في فتح والإغلاق) لإيماءات اللّمس (touch gestures). |
− | * locked-closed (مقفل ومغلق): وتعني أنّ | + | * locked-closed (مقفل ومغلق): وتعني أنّ الواجهة المسحوبة ستبقى مغلقة ولا تستجيب لإيماءات اللّمس. |
− | * locked-open (مقفل ومفتوح): وتعني أنّ | + | * locked-open (مقفل ومفتوح): وتعني أنّ الواجهة المسحوبة ستبقى مفتوحة ولا تستجيب لإيماءات اللّمس، ويمكن برمجيًا إبقاءها مفتوحة أو مغلقة عن طريق التّوابع (<code>openDrawer</code>/<code>closeDrawer</code>). |
{| class="wikitable" | {| class="wikitable" | ||
سطر 98: | سطر 98: | ||
=== <code>drawerPosition</code> === | === <code>drawerPosition</code> === | ||
− | تُحدد طرف الشّاشة الذي | + | تُحدد طرف الشّاشة الذي ستنزلق (slide) منه الواجهة المسحوبة، والقيمة الافتراضيّة لهذه الخاصّية <code>left</code>. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 108: | سطر 108: | ||
=== <code>drawerWidth</code> === | === <code>drawerWidth</code> === | ||
− | تُحدد العرض الذي ستظهر به الواجهة المسحوبة بعد | + | تُحدد العرض الذي ستظهر به الواجهة المسحوبة بعد سحبها من حافّة نافذة الشّاشة. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 187: | سطر 187: | ||
=== <code>statusBarBackgroundColor</code> === | === <code>statusBarBackgroundColor</code> === | ||
− | تجعل | + | تجعل الواجهة المسحوبة تأخذ كامل الشّاشة بعد أن يأخذ لون خلفية شريط الحالة لتسمح بفتحه فوق شريط الحالة، وتعمل هذه الخاصيّة فقط على الإصدار 21 وما بعده من الواجهة البرمجيّة API. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 199: | سطر 199: | ||
=== <code>closeDrawer()</code> === | === <code>closeDrawer()</code> === | ||
− | <syntaxhighlight lang="javascript"> | + | يستعمَل لإغلاق الواجهة المسحوبة drawer.<syntaxhighlight lang="javascript"> |
closeDrawer(); | closeDrawer(); | ||
− | </syntaxhighlight> | + | </syntaxhighlight> |
− | |||
=== <code>openDrawer()</code> === | === <code>openDrawer()</code> === | ||
− | <syntaxhighlight lang="javascript"> | + | يستعمَل لفتح الواجهة المسحوبة drawer.<syntaxhighlight lang="javascript"> |
openDrawer(); | openDrawer(); | ||
− | </syntaxhighlight> | + | </syntaxhighlight> |
− | |||
== مصادر == | == مصادر == | ||
مراجعة 08:52، 29 سبتمبر 2021
هو مكوّن 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) | لا |
تُستخدم لإظهار الواجهة المسحوبة على جانب الشّاشة.
النوع | مطلوب |
---|---|
دالة (function) | نعم |
statusBarBackgroundColor
تجعل الواجهة المسحوبة تأخذ كامل الشّاشة بعد أن يأخذ لون خلفية شريط الحالة لتسمح بفتحه فوق شريط الحالة، وتعمل هذه الخاصيّة فقط على الإصدار 21 وما بعده من الواجهة البرمجيّة API.
النوع | مطلوب |
---|---|
لون (color )
|
لا |
التوابع
closeDrawer()
يستعمَل لإغلاق الواجهة المسحوبة drawer.
closeDrawer();
openDrawer()
يستعمَل لفتح الواجهة المسحوبة drawer.
openDrawer();