الفرق بين المراجعتين لصفحة: «ReactNative/toolbarandroid»

من موسوعة حسوب
→ التعديل السابق
مرئينص الويكي
طلا ملخص تعديل
طلا ملخص تعديل
 
(5 مراجعات متوسطة بواسطة 3 مستخدمين غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:ToolbarAndroid في React Native}}</noinclude><blockquote>'''''ملاحظة:''' مهملة وأزيلت من React Native ابتداء من الإصدار 0.61.0. استخدم ‎[https://github.com/react-native-community/toolbar-android @react-native-community/toolbar-android] بدلًا منها.''</blockquote>مكوّن [[React]] الذي يغلّف الأداة <code>[https://developer.android.com/reference/android/support/v7/widget/Toolbar.html Toolbar]</code> الخاصة بمنصّة Android فقط، حيث يمكن لشريط الأدوات (Toolbar) إظهار الشعار (logo) ورمز شريط التنقّل (navigation icon) والعنوان الرئيسي والفرعي وقائمة الإجراءات (actions). حيث يتوضّع العنوان الرئيسي والفرعي في المنتصف كونه ممتد، في حين يتوضّع الشعار ورمز شريط التنقل على اليسار، أما قائمة الإجراءات فعلى اليمين.
<noinclude>{{DISPLAYTITLE:المكون ToolbarAndroid في ReactNative}}</noinclude>
<blockquote>'''ملاحظة:''' هذا المكون أُهمل وأُزيل من [[ReactNative|React Native]] ابتداء من الإصدار 0.61.0، لكن يمكنك استخدام [https://github.com/react-native-community/toolbar-android <code>toolbar-android</code>] بدلًا منها.
</blockquote>
مكوّن منصّة [[React/components and props|React]] الذي يغلّف الأداة [https://developer.android.com/reference/android/support/v7/widget/Toolbar.html <code>Toolbar</code>] الخاصة بمنصّة Android فقط، حيث يمكن لشريط الأدوات (Toolbar) عرض شعارٍ (logo) ورمز تنقّل (navigation icon) وعنوانٍ رئيسيٍّ وفرعيٍّ وقائمة إجراءاتٍ (actions)، حيث يتوضّع العنوان الرئيسي والفرعي في المنتصف كونهما يتوسّعان بينما يتوضّع الشعار ورمز شريط التنقل على اليسار، وقائمة الإجراءات على اليمين.


في حال احتوى شريط الأدوات فقط على مكوّن ابن، فإنه يتوضّع بين العنوان وقائمة الإجراءات.
في حال احتوى شريط الأدوات على مكوّن ابنٍ وحيدٍ فسيعرَض بين العنوان وقائمة الإجراءات.


كما يدعم شريط الأدوات استخدام الصور البعيدة (remote) كرموز للشعار وشريط التنقل وقائمة الإجراءات, ويُستخدم ذلك فقط في الوضع DEV حيث يترجَم <code>require('./some_icon.png')‎</code> إلى عنوان URL. إلا أنه يجب دائمًا في وضع الإصدار (release mode) استخدام مصدر قابل للرسم (drawable resource) من أجل هذه الرموز (icons). بالتالي فإنه لا يجب استخدام العناوين <code>{uri: '<nowiki>http://...'‎}</nowiki></code> بشكل صريح لكي يستطيع <code>require('./some_icon.png')‎</code> تلقائيًا اختيار المصدر المناسب لهذه الرموز.  
على الرغم من دعم شريط الأدوات استخدام الصور البعيدة (remote) على أساس رموز للشعار وشريط التنقل وقائمة الإجراءات، إلا أن ذلك يُستخدَم فقط في الوضع DEV حيث يترجَم <code>(require('./some_icon.png'</code> إلى عنوان URL مجمّعٍ، ومع ذلك يجب استخدام مصدرٍ قابل للرسم لهذه الرموز في وضع الإصدار (release mode) دائمًا، بالتالي لا تستخدَم العناوين ‏<code>{'...//uri: 'http}</code> بصورة صريحة، لكي يستطيع <code>('require('./some_icon.png</code> اختيار المصدر المناسب لهذه الرموز تلقائيًا.  
__toc__
== مثال ==


== مثال ==
<syntaxhighlight lang="javascript">render: function() {
<syntaxhighlight lang="javascript">
render: function() {
   return (
   return (
     <ToolbarAndroid
     <ToolbarAndroid
سطر 20: سطر 23:
     showSettings();
     showSettings();
   }
   }
}
}</syntaxhighlight>
== الخاصيات ==


</syntaxhighlight>
موروثة من الخاصيات <code>[[ReactNative/view|View]]</code> .


== الخاصيات (Props) ==
=== <code>actions</code> ===
موروثة من خاصيّات المكوّن <code>[[ReactNative/view#.D8.A7.D9.84.D8.AE.D8.A7.D8.B5.D9.8A.D8.A7.D8.AA|View]]</code>.


=== <code>actions</code> ===
تضع الإجراءات المحتملة في شريط الأدوات كجزءٍ من قائمة الإجراءات، حيث تظهر كأيقوناتٍ أو نصٍّ على يمين شريط الأدوات، وفي حال لم تتّسع فستوضع في قائمة الفائض <code>overflow</code>، وتأخذ هذه الخاصيّة مصفوفةً من الكائنات، ولكلّ كائنٍ المفاتيح التالية:
تضع الإجراءات المحتملة في شريط الأدوات كجزء من قائمة الإجراءات. حيث تظهر كرموز أو نص على يمين شريط الأدوات, وفي حال عدم إمكانية استيعابها فإنها توضع في القائمة <code>overflow</code>. وتأخذ هذه الخاصيّة أي مصفوفة من الكائنات, ولكل كائن المفاتيح التالية:


* <code>title</code> : عنوان الإجراء. مطلوب.  
* <code>title</code>: عنوان الإجراء، وهو مطلوب.
* <code>icon</code> : رمز الإجراء, مثل <code>require('./some_icon.png')</code>.
* <code>icon</code>: أيقونة الإجراء، مثل: ‪.<code>require('./some_icon.png')</code>
* <code>show</code> : يحدد فيما إذا سيتم إظهار رمز الإجراء أو إخفائه في قائمة الفيض (overflow). وله القيم <code>always</code> و <code>ifRoom</code> و <code>never</code>.  
* <code>show</code>: يحدد عرض الإجراء كأيقونةٍ أو إخفاءه في قائمة الفائض (overflow)، وله القيم <code>always</code>، و<code>ifRoom</code>، و<code>never</code>.
* <code>showWithText</code> : قيمة منطقية لتحدد فيما إذا سيتم إظهار النص بجانب الرمز أم لا.
* <code>showWithText</code>: قيمة منطقية، يحدِّد إظهار النص بجانب الأيقونة أو عدم إظهاره.


{| class="wikitable"
{| class="wikitable"
!النوع
! النوع
!مطلوب
! مطلوب
|-
|-
|مصفوفة من الكائنات:
| <code>{title: string,icon: optionalImageSource,show: enum('always', 'ifRoom', 'never'),showWithText: bool}</code>
<code>{title: string,icon: optionalImageSource,show: enum('always', 'ifRoom', 'never'),showWithText: bool}</code>
| لا
|لا
|}
|}


=== <code>contentInsetStart</code> ===
=== <code>contentInsetStart</code> ===
تحدد دخول المحتوى لحافة بداية شريط الأدوات، حيث يؤثر هذا على المساحة الصالحة لمحتوى شريط الأدوات غير رمز شريط التنقّل والقائمة، كما يحدد الهامش الأصغري لهذا المحتوى، ويمكن استخدامه لمحاذاة محتوى شريط الأدوات بكفاءة على طول خطوط الشبكة المعروفة.
 
تحدد شكل محتوى حافة بداية شريط الأدوات، حيث سيؤثر هذا على المساحة الصالحة لمحتوى شريط الأدوات أكثر من رمز شريط التنقّل والقائمة، كما يحدد الحدّ الأدنى لهامش المحتوى، ويمكن استخدامه لمحاذاة محتوى شريط الأدوات بكفاءةٍ على طول خطوط الشبكة المعروفة.
 
{| class="wikitable"
{| class="wikitable"
!النوع
! النوع
!مطلوب
! مطلوب
|-
|-
|عدد (number)
| عدد (number)
|لا
| لا
|}
|}


=== <code>contentInsetEnd</code> ===
=== <code>contentInsetEnd</code> ===
تحدد دخول المحتوى لحافة نهاية شريط الأدوات، حيث يؤثر هذا على المساحة الصالحة لمحتوى شريط الأدوات غير رمز شريط التنقّل والقائمة، كما يحدد الهامش الأصغري لهذا المحتوى ويمكن استخدامه لمحاذاة محتوى شريط الأدوات بكفاءة على طول خطوط الشبكة المعروفة.
 
تحدد شكل محتوى حافة نهاية شريط الأدوات، حيث سيؤثر هذا على المساحة الصالحة لمحتوى شريط الأدوات أكثر من رمز شريط التنقّل والقائمة، كما يحدد الحدّ الأدنى لهامش المحتوى، ويمكن استخدامه لمحاذاة محتوى شريط الأدوات بكفاءةٍ على طول خطوط الشبكة المعروفة.
 
{| class="wikitable"
{| class="wikitable"
!النوع
! النوع
!مطلوب
! مطلوب
|-
|-
|عدد (number)
| عدد (number)
|لا
| لا
|}
|}


=== <code>logo</code> ===
=== <code>logo</code> ===
تحدد شعار شريط الأدوات.
 
تحدّد شعار شريط الأدوات.
 
{| class="wikitable"
{| class="wikitable"
!النوع
! النوع
!مطلوب
! مطلوب
|-
|-
|مصدر الصورة (Image.propTypes.source)
| مصدر الصورة (optionalImageSource)
|لا
| لا
|}
|}


=== <code>navIcon</code> ===
=== <code>navIcon</code> ===
تحدد رمز (أيقونة) شريط التنقّل.
 
تحدد أيقونة شريط التنقّل.
 
{| class="wikitable"
{| class="wikitable"
!النوع
! النوع
!مطلوب
! مطلوب
|-
|-
|مصدر الصورة (Image.propTypes.source)
| مصدر الصورة (optionalImageSource)
|لا
| لا
|}
|}


=== <code>onActionSelected</code> ===
=== <code>onActionSelected</code> ===
رد نداء (callback) يُستدعَى عند اختيار الإجراء، حيث يُمرَّر له موقع الإجراء ضمن مصفوفة الإجراءات (actions array).
 
ردّ نداءٍ يستدعى عند اختيار الإجراء، حيث يُمرَّر لها موقع الإجراء ضمن مصفوفة الإجراءات.
 
{| class="wikitable"
{| class="wikitable"
!النوع
! النوع
!مطلوب
! مطلوب
|-
|-
|دالة (function)
| دالة (function)
|لا
| لا
|}
|}


=== <code>onIconClicked</code> ===
=== <code>onIconClicked</code> ===
رد نداء (callback) يُستدعَى عند اختيار الرمز (الأيقونة).
 
رد نداءٍ يستدعى عند اختيار الرمز.
 
{| class="wikitable"
{| class="wikitable"
!النوع
! النوع
!مطلوب
! مطلوب
|-
|-
|دالة (function)
| دالة (function)
|لا
| لا
|}
|}


=== <code>overflowIcon</code> ===
=== <code>overflowIcon</code> ===
تحدد رمز (أيقونة) قائمة الفيض (overflow icon).
 
تحدد أيقونة قائمة الفائض.
 
{| class="wikitable"
{| class="wikitable"
!النوع
! النوع
!مطلوب
! مطلوب
|-
|-
|مصدر الصورة (Image.propTypes.source)
| مصدر الصورة (optionalImageSource)
|لا
| لا
|}
|}


=== <code>rtl</code> ===
=== <code>rtl</code> ===
تُستخدَم لضبط اتجاه شريط الأدوات من اليسار إلى اليمين، وإضافة لهذه الخاصيّة، يجب إضافة <code>android:supportsRtl="true"‎</code> إلى الملف <code>AndroidManifest.xml</code> الخاص بالتطبيق ومن ثم استدعاء <code>setLayoutDirection(LayoutDirection.RTL)‎</code> في دالة <code>onCreate</code> للنشاط الرئيسي (MainActivity).  
 
تُستخدم لضبط اتجاه شريط الأدوات من اليسار إلى اليمين، كما يجب إضافة <code>&quot;android:supportsRtl=&quot;true</code> إلى الملف AndroidManifest.xml الخاص بالتطبيق ومن ثم استدعاء <code>(setLayoutDirection(LayoutDirection.RTL</code> في دالة <code>onCreate</code> للنشاط الرئيسي (MainActivity).  
 
{| class="wikitable"
{| class="wikitable"
!النوع
! النوع
!مطلوب
! مطلوب
|-
|-
|قيمة منطقية (bool)
| (bool)
|لا
| لا
|}
|}


=== <code>subtitle</code> ===
=== <code>subtitle</code> ===
تحدد العنوان الفرعي لشريط الأدوات.
تحدد العنوان الفرعي لشريط الأدوات.
{| class="wikitable"
{| class="wikitable"
!النوع
! النوع
!مطلوب
! مطلوب
|-
|-
|سلسلة نصية (string)
| سلسلة نصية (string)
|لا
| لا
|}
|}


=== <code>subtitleColor</code> ===
=== <code>subtitleColor</code> ===
تحدد لون العنوان الفرعي لشريط الأدوات.
 
تحدد لون العنوان الفرعيّ لشريط الأدوات.
 
{| class="wikitable"
{| class="wikitable"
!النوع
! النوع
!مطلوب
! مطلوب
|-
|-
|لون ([https://reactnative.dev/docs/colors color])
| لون (<code>[[ReactNative/colors|color]]</code>)
|لا
| لا
|}
|}


=== <code>testID</code> ===
=== <code>testID</code> ===
تُستخدم لوضع هذا الإظهار في الاختبارات الشاملة (end-to-end).  
 
تُستخدم لوضع هذا الإظهار في الاختبارات الشّاملة (end-to-end).  
 
{| class="wikitable"
{| class="wikitable"
!النوع
! النوع
!مطلوب
! مطلوب
|-
|-
|سلسلة نصية (string)
| سلسلة نصية (string)
|لا
| لا
|}
|}


=== <code>title</code> ===
=== <code>title</code> ===
تحدد العنوان الرئيسي لشريط الأدوات.
 
تحدد العنوان الرئيسيّ لشريط الأدوات.
 
{| class="wikitable"
{| class="wikitable"
!النوع
! النوع
!مطلوب
! مطلوب
|-
|-
|سلسلة نصية (string)
| سلسلة نصية (string)
|لا
| لا
|}
|}


=== <code>titleColor</code> ===
=== <code>titleColor</code> ===
تحدد لون العنوان الرئيسي لشريط الأدوات.
 
تحدد لون العنوان الرئيسيّ لشريط الأدوات.
 
{| class="wikitable"
{| class="wikitable"
!النوع
! النوع
!مطلوب
! مطلوب
|-
|-
|لون ([[ReactNative/colors|color]])
| لون (<code>color</code>)
|لا
| لا
|}
|}


== مصادر ==
== مصادر ==


* [https://reactnative.dev/docs/toolbarandroid صفحة ToolbarAndroid ''' '''في توثيق React Native الرسمي.]
* [https://facebook.github.io/react-native/docs/toolbarandroid صفحة ToolbarAndroid في توثيق React Native الرسميّ]
 
[[تصنيف: ReactNative]]
[[تصنيف: React Native Component]]

المراجعة الحالية بتاريخ 12:23، 12 أكتوبر 2021

ملاحظة: هذا المكون أُهمل وأُزيل من React Native ابتداء من الإصدار 0.61.0، لكن يمكنك استخدام toolbar-android بدلًا منها.

مكوّن منصّة React الذي يغلّف الأداة Toolbar الخاصة بمنصّة Android فقط، حيث يمكن لشريط الأدوات (Toolbar) عرض شعارٍ (logo) ورمز تنقّل (navigation icon) وعنوانٍ رئيسيٍّ وفرعيٍّ وقائمة إجراءاتٍ (actions)، حيث يتوضّع العنوان الرئيسي والفرعي في المنتصف كونهما يتوسّعان بينما يتوضّع الشعار ورمز شريط التنقل على اليسار، وقائمة الإجراءات على اليمين.

في حال احتوى شريط الأدوات على مكوّن ابنٍ وحيدٍ فسيعرَض بين العنوان وقائمة الإجراءات.

على الرغم من دعم شريط الأدوات استخدام الصور البعيدة (remote) على أساس رموز للشعار وشريط التنقل وقائمة الإجراءات، إلا أن ذلك يُستخدَم فقط في الوضع DEV حيث يترجَم (require('./some_icon.png' إلى عنوان URL مجمّعٍ، ومع ذلك يجب استخدام مصدرٍ قابل للرسم لهذه الرموز في وضع الإصدار (release mode) دائمًا، بالتالي لا تستخدَم العناوين ‏{'...//uri: 'http} بصورة صريحة، لكي يستطيع ('require('./some_icon.png اختيار المصدر المناسب لهذه الرموز تلقائيًا.

مثال

render: function() {
  return (
    <ToolbarAndroid
      logo={require('./app_logo.png')}
      title="AwesomeApp"
      actions={[{title: 'Settings', icon: require('./icon_settings.png'), show: 'always'}]}
      onActionSelected={this.onActionSelected} />
  )
},
onActionSelected: function(position) {
  if (position === 0) { // index of 'Settings'
    showSettings();
  }
}

الخاصيات

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

actions

تضع الإجراءات المحتملة في شريط الأدوات كجزءٍ من قائمة الإجراءات، حيث تظهر كأيقوناتٍ أو نصٍّ على يمين شريط الأدوات، وفي حال لم تتّسع فستوضع في قائمة الفائض overflow، وتأخذ هذه الخاصيّة مصفوفةً من الكائنات، ولكلّ كائنٍ المفاتيح التالية:

  • title: عنوان الإجراء، وهو مطلوب.
  • icon: أيقونة الإجراء، مثل: ‪.require('./some_icon.png')
  • show: يحدد عرض الإجراء كأيقونةٍ أو إخفاءه في قائمة الفائض (overflow)، وله القيم always، وifRoom، وnever.
  • showWithText: قيمة منطقية، يحدِّد إظهار النص بجانب الأيقونة أو عدم إظهاره.
النوع مطلوب
{title: string,icon: optionalImageSource,show: enum('always', 'ifRoom', 'never'),showWithText: bool} لا

contentInsetStart

تحدد شكل محتوى حافة بداية شريط الأدوات، حيث سيؤثر هذا على المساحة الصالحة لمحتوى شريط الأدوات أكثر من رمز شريط التنقّل والقائمة، كما يحدد الحدّ الأدنى لهامش المحتوى، ويمكن استخدامه لمحاذاة محتوى شريط الأدوات بكفاءةٍ على طول خطوط الشبكة المعروفة.

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

contentInsetEnd

تحدد شكل محتوى حافة نهاية شريط الأدوات، حيث سيؤثر هذا على المساحة الصالحة لمحتوى شريط الأدوات أكثر من رمز شريط التنقّل والقائمة، كما يحدد الحدّ الأدنى لهامش المحتوى، ويمكن استخدامه لمحاذاة محتوى شريط الأدوات بكفاءةٍ على طول خطوط الشبكة المعروفة.

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

تحدّد شعار شريط الأدوات.

النوع مطلوب
مصدر الصورة (optionalImageSource) لا

navIcon

تحدد أيقونة شريط التنقّل.

النوع مطلوب
مصدر الصورة (optionalImageSource) لا

onActionSelected

ردّ نداءٍ يستدعى عند اختيار الإجراء، حيث يُمرَّر لها موقع الإجراء ضمن مصفوفة الإجراءات.

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

onIconClicked

رد نداءٍ يستدعى عند اختيار الرمز.

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

overflowIcon

تحدد أيقونة قائمة الفائض.

النوع مطلوب
مصدر الصورة (optionalImageSource) لا

rtl

تُستخدم لضبط اتجاه شريط الأدوات من اليسار إلى اليمين، كما يجب إضافة "android:supportsRtl="true إلى الملف AndroidManifest.xml الخاص بالتطبيق ومن ثم استدعاء (setLayoutDirection(LayoutDirection.RTL في دالة onCreate للنشاط الرئيسي (MainActivity).

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

subtitle

تحدد العنوان الفرعي لشريط الأدوات.

النوع مطلوب
سلسلة نصية (string) لا

subtitleColor

تحدد لون العنوان الفرعيّ لشريط الأدوات.

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

testID

تُستخدم لوضع هذا الإظهار في الاختبارات الشّاملة (end-to-end).

النوع مطلوب
سلسلة نصية (string) لا

title

تحدد العنوان الرئيسيّ لشريط الأدوات.

النوع مطلوب
سلسلة نصية (string) لا

titleColor

تحدد لون العنوان الرئيسيّ لشريط الأدوات.

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

مصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=ReactNative/toolbarandroid&oldid=31614»