الفرق بين المراجعتين ل"ReactNative/toolbarandroid"

مراجعة 10:13، 19 فبراير 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)	لا

`logo`

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

النوع	مطلوب
مصدر الصورة (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`)	لا

مصادر

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

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:المكون ToolbarAndroid في ReactNative}}</noinclude>
-<blockquote>'''ملاحظة:''' مهملة وأزيلت من React Native ابتداء من الإصدار 0.61.0. استخدم [https://github.com/react-native-community/toolbar-android <code>@react-native-community/toolbar-android</code>] بدلًا منها.
+<blockquote>'''ملاحظة:''' هذا المكون أُهمل وأُزيل من [[ReactNative|React Native]] ابتداء من الإصدار 0.61.0، لكن يمكنك استخدام [https://github.com/react-native-community/toolbar-android <code>toolbar-android</code>] بدلًا منها.
 </blockquote>
-مكوّن منصّة React الذي يغلّف الأداة [https://developer.android.com/reference/android/support/v7/widget/Toolbar.html <code>Toolbar</code>] الخاصة بمنصّة Android فقط، حيث يمكن لشريط الأدوات (Toolbar) عرض شعارٍ (logo) ورمز تنقّل (navigation icon) وعنوانٍ رئيسيٍّ وفرعيٍّ وقائمة إجراءاتٍ (actions)، حيث يتوضّع العنوان الرئيسي والفرعي في المنتصف كونهما يتوسّعان بينما يتوضّع الشعار ورمز شريط التنقل على اليسار، وقائمة الإجراءات على اليمين.
+مكوّن منصّة [[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) دائمًا، بالتالي لا تستخدَم العناوين <code>{uri: 'http://...'}</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__
 == مثال ==
@@ سطر 26: / سطر 26: @@
 == الخاصيات ==
-موروثة من الخاصيات [https://reactnative.dev/docs/view#props <code>View props</code>].
+موروثة من الخاصيات <code>[[ReactNative/view|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>: قيمة منطقية، يحدِّد إظهار النص بجانب الأيقونة أو عدم إظهاره.
@@ سطر 41: / سطر 41: @@
 ! مطلوب
 |-
-| مصفوفة من الكائن (array of object: {title: string,icon: optionalImageSource,show: enum('always', 'ifRoom', 'never'),showWithText: bool})
+| <code>{title: string,icon: optionalImageSource,show: enum('always', 'ifRoom', 'never'),showWithText: bool}</code>
 | لا
 |}
@@ سطر 131: / سطر 131: @@
 === <code>rtl</code> ===
-تُستخدم لضبط اتجاه شريط الأدوات من اليسار إلى اليمين، كما يجب إضافة android:supportsRtl=&quot;true&quot; إلى الملف AndroidManifest.xml الخاص بالتطبيق ومن ثم استدعاء <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"
@@ سطر 137: / سطر 137: @@
 ! مطلوب
 |-
-| قيمة منطقية (bool)
+| (bool)
 | لا
 |}
@@ سطر 161: / سطر 161: @@
 ! مطلوب
 |-
-| لون ([https://reactnative.dev/docs/colors <code>color</code>])
+| لون (<code>[[ReactNative/colors|color]]</code>)
 | لا
 |}
@@ سطر 197: / سطر 197: @@
 ! مطلوب
 |-
-| لون ([https://reactnative.dev/docs/colors <code>color</code>])
+| لون (<code>color</code>)
 | لا
 |}