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

مراجعة 08:09، 18 ديسمبر 2020

ملاحظة: مهملة وأزيلت من React Native ابتداء من الإصدار 0.61.0. استخدم ‎@react-native-community/toolbar-android بدلًا منها.

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

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

كما يدعم شريط الأدوات استخدام الصور البعيدة (remote) كرموز للشعار وشريط التنقل وقائمة الإجراءات, ويُستخدم ذلك فقط في الوضع DEV حيث يترجَم require('./some_icon.png')‎ إلى عنوان URL. إلا أنه يجب دائمًا في وضع الإصدار (release mode) استخدام مصدر قابل للرسم (drawable resource) من أجل هذه الرموز (icons). بالتالي فإنه لا يجب استخدام العناوين {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();
  }
}

الخاصيات (Props)

موروثة من خاصيّات المكوّن 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`

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

النوع	مطلوب
مصدر الصورة (Image.propTypes.source)	لا

`navIcon`

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

النوع	مطلوب
مصدر الصورة (Image.propTypes.source)	لا

`onActionSelected`

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

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

`onIconClicked`

رد نداء (callback) يُستدعَى عند اختيار الرمز (الأيقونة).

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

`overflowIcon`

تحدد رمز (أيقونة) قائمة الفيض (overflow icon).

النوع	مطلوب
مصدر الصورة (Image.propTypes.source)	لا

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

@@ سطر 27: / سطر 27: @@
 موروثة من خاصيّات المكوّن <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>actions</code> ===
 تضع الإجراءات المحتملة في شريط الأدوات كجزء من قائمة الإجراءات. حيث تظهر كرموز أو نص على يمين شريط الأدوات, وفي حال عدم إمكانية استيعابها فإنها توضع في القائمة <code>overflow</code>. وتأخذ هذه الخاصيّة أي مصفوفة من الكائنات, ولكل كائن المفاتيح التالية:
@@ سطر 54: / سطر 54: @@
 |}
-=== <code>'''contentInsetEnd'''</code> ===
+=== <code>contentInsetEnd</code> ===
 تحدد دخول المحتوى لحافة نهاية شريط الأدوات، حيث يؤثر هذا على المساحة الصالحة لمحتوى شريط الأدوات غير رمز شريط التنقّل والقائمة، كما يحدد الهامش الأصغري لهذا المحتوى ويمكن استخدامه لمحاذاة محتوى شريط الأدوات بكفاءة على طول خطوط الشبكة المعروفة.
 {| class="wikitable"
@@ سطر 64: / سطر 64: @@
 |}
-=== <code>'''logo'''</code> ===
+=== <code>logo</code> ===
 تحدد شعار شريط الأدوات.
 {| class="wikitable"
@@ سطر 74: / سطر 74: @@
 |}
-=== <code>'''navIcon'''</code> ===
+=== <code>navIcon</code> ===
 تحدد رمز (أيقونة) شريط التنقّل.
 {| class="wikitable"
@@ سطر 84: / سطر 84: @@
 |}
-=== <code>'''onActionSelected'''</code> ===
+=== <code>onActionSelected</code> ===
 رد نداء (callback) يُستدعَى عند اختيار الإجراء، حيث يُمرَّر له موقع الإجراء ضمن مصفوفة الإجراءات (actions array).
 {| class="wikitable"
@@ سطر 94: / سطر 94: @@
 |}
-=== <code>'''onIconClicked'''</code> ===
+=== <code>onIconClicked</code> ===
 رد نداء (callback) يُستدعَى عند اختيار الرمز (الأيقونة).
 {| class="wikitable"
@@ سطر 104: / سطر 104: @@
 |}
-=== <code>'''overflowIcon'''</code> ===
+=== <code>overflowIcon</code> ===
 تحدد رمز (أيقونة) قائمة الفيض (overflow icon).
 {| class="wikitable"
@@ سطر 114: / سطر 114: @@
 |}
-=== <code>'''rtl'''</code> ===
+=== <code>rtl</code> ===
 تُستخدَم لضبط اتجاه شريط الأدوات من اليسار إلى اليمين، وإضافة لهذه الخاصيّة، يجب إضافة <code>android:supportsRtl="true"‎</code> إلى الملف <code>AndroidManifest.xml</code> الخاص بالتطبيق ومن ثم استدعاء <code>setLayoutDirection(LayoutDirection.RTL)‎</code> في دالة <code>onCreate</code> للنشاط الرئيسي (MainActivity).
 {| class="wikitable"
@@ سطر 124: / سطر 124: @@
 |}
-=== <code>'''subtitle'''</code> ===
+=== <code>subtitle</code> ===
 تحدد العنوان الفرعي لشريط الأدوات.
 {| class="wikitable"
@@ سطر 134: / سطر 134: @@
 |}
-=== <code>'''subtitleColor'''</code> ===
+=== <code>subtitleColor</code> ===
 تحدد لون العنوان الفرعي لشريط الأدوات.
 {| class="wikitable"
@@ سطر 144: / سطر 144: @@
 |}
-=== <code>'''testID'''</code> ===
+=== <code>testID</code> ===
 تُستخدم لوضع هذا الإظهار في الاختبارات الشاملة (end-to-end).
 {| class="wikitable"
@@ سطر 154: / سطر 154: @@
 |}
-=== <code>'''title'''</code> ===
+=== <code>title</code> ===
 تحدد العنوان الرئيسي لشريط الأدوات.
 {| class="wikitable"
@@ سطر 164: / سطر 164: @@
 |}
-=== <code>'''titleColor'''</code> ===
+=== <code>titleColor</code> ===
 تحدد لون العنوان الرئيسي لشريط الأدوات.
 {| class="wikitable"