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

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE: ProgressBarAndroid في React Native}}</noinclude> مكوّن React يعمل على نظام Android فقط، يُستخدم للإشارة...')
 
ط
 
(3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
−
<noinclude>{{DISPLAYTITLE: ProgressBarAndroid في React Native}}</noinclude>
+
<noinclude>{{DISPLAYTITLE:المكون ProgressBarAndroid في React Native}}</noinclude>
−
مكوّن React يعمل على نظام Android فقط، يُستخدم للإشارة إلى أن التطبيق قيد التحميل (loading) أو أن هناك بعض الأنشطة قيد التنفيذ في التطبيق.
+
<blockquote>'''مهمل''': استعمل إحدى [https://reactnative.directory/?search=progressbar هذه الحزم من المجتمع] بدلًا منه. </blockquote>مكوّن [[React]] يعمل على نظام Android فقط، يُستخدم للإشارة إلى أن التطبيق قيد التحميل (loading) أو أن هناك بعض الأنشطة قيد التنفيذ في التطبيق.
  
−
مثال:
+
إليك مثال ([https://snack.expo.dev/@hsoubwiki/progressbarandroid تجربة حية]):
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
−
import React, {Component} from 'react';
+
import React from 'react';
−
import {ProgressBarAndroid, StyleSheet, View} from 'react-native';
+
import {View, StyleSheet, ProgressBarAndroid, Text} from 'react-native';
  
−
export default class App extends Component {
+
const App = () => {
−
   render() {
+
   return (
−
     return (
+
     <View style={styles.container}>
−
       <View style={styles.container}>
+
       <View style={styles.example}>
 +
        <Text>Circle Progress Indicator</Text>
 
         <ProgressBarAndroid />
 
         <ProgressBarAndroid />
 +
      </View>
 +
      <View style={styles.example}>
 +
        <Text>Horizontal Progress Indicator</Text>
 
         <ProgressBarAndroid styleAttr="Horizontal" />
 
         <ProgressBarAndroid styleAttr="Horizontal" />
 +
      </View>
 +
      <View style={styles.example}>
 +
        <Text>Colored Progress Indicator</Text>
 
         <ProgressBarAndroid styleAttr="Horizontal" color="#2196F3" />
 
         <ProgressBarAndroid styleAttr="Horizontal" color="#2196F3" />
 +
      </View>
 +
      <View style={styles.example}>
 +
        <Text>Fixed Progress Value</Text>
 
         <ProgressBarAndroid
 
         <ProgressBarAndroid
 
           styleAttr="Horizontal"
 
           styleAttr="Horizontal"
سطر 20: سطر 30:
 
         />
 
         />
 
       </View>
 
       </View>
−
     );
+
     </View>
−
  }
+
  );
 
}
 
}
  
سطر 27: سطر 37:
 
   container: {
 
   container: {
 
     flex: 1,
 
     flex: 1,
−
     justifyContent: 'space-evenly',
+
     justifyContent: 'center',
−
     padding: 10,
+
     alignItems: 'center',
 +
  },
 +
  example: {
 +
    marginVertical: 24,
 
   },
 
   },
 
});
 
});
 +
 +
export default App;
 
</syntaxhighlight>
 
</syntaxhighlight>
 
== الخاصيات ==
 
== الخاصيات ==
سطر 54: سطر 69:
 
|}
 
|}
 
===‎‎<code>indeterminate</code>‎‎===
 
===‎‎<code>indeterminate</code>‎‎===
−
ما إذا كان شريط التحميل سيُظهر تقدّمًا غير مُحدّد. لاحظ أن هذا يمكن أن يكون ذا القيمة <code>false</code> فقط إذا كانت قيمة الخاصيّة styleAttr القيمة Horizontal، ويتطلب قيمةَ التقدّم progress.
+
ما إذا كان شريط التحميل سيُظهر تقدّمًا غير مُحدّد. لاحظ أن هذا يمكن أن يكون ذا القيمة <code>false</code> فقط إذا كانت قيمةُ الخاصيّة <code>styleAttr</code> القيمةَ <code>Horizontal</code>، ويتطلب قيمةَ التقدّم <code>progress</code>.
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
سطر 64: سطر 79:
  
 
===‎‎<code>progress</code>‎‎===
 
===‎‎<code>progress</code>‎‎===
−
قيمة التّقدم (بين 0 و 1).
+
قيمة التّقدم (بين <code>0</code> و <code>1</code>).
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
سطر 72: سطر 87:
 
|لا
 
|لا
 
|}
 
|}
−
 
  
 
===‎‎<code>styleAttr</code>‎‎===
 
===‎‎<code>styleAttr</code>‎‎===
−
نمط ProgressBar. واحد من:
+
نمط شريط التقدم. واحدة من القيم التالية:
  
 
*عمودي: <code>Horizontal</code>
 
*عمودي: <code>Horizontal</code>
سطر 89: سطر 103:
 
!مطلوب
 
!مطلوب
 
|-
 
|-
−
|<code>enum('Horizontal', 'Normal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse')</code>
+
|('Horizontal', 'Normal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse')
 
|لا
 
|لا
 
|}
 
|}
  
 
===‎‎<code>testID</code>‎‎===
 
===‎‎<code>testID</code>‎‎===
−
يستخدم لتحديد موقع هذا العرض في الاختبارات الشاملة (end-to-end tests).
+
يُستخدَم لتحديد موقع هذا العرض في الاختبارات الشاملة (end-to-end tests).
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
سطر 102: سطر 116:
 
|لا
 
|لا
 
|}
 
|}
 +
[[تصنيف:ReactNative]]
  
 
== مصادر ==
 
== مصادر ==
−
* [https://facebook.github.io/react-native/docs/progressbarandroid صفحة ProgressBarAndroid في توثيق React Native الرسمي.]
+
* [https://reactnative.dev/docs/progressbarandroid صفحة ProgressBarAndroid في توثيق React Native الرسمي.]
 
[[تصنيف:ReactNative]]
 
[[تصنيف:ReactNative]]
 +
[[تصنيف:React Native Component]]

المراجعة الحالية بتاريخ 14:45، 9 أكتوبر 2021

مهمل: استعمل إحدى هذه الحزم من المجتمع بدلًا منه.

مكوّن React يعمل على نظام Android فقط، يُستخدم للإشارة إلى أن التطبيق قيد التحميل (loading) أو أن هناك بعض الأنشطة قيد التنفيذ في التطبيق.

إليك مثال (تجربة حية): 

import React from 'react';
import {View, StyleSheet, ProgressBarAndroid, Text} from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.example}>
        <Text>Circle Progress Indicator</Text>
        <ProgressBarAndroid />
      </View>
      <View style={styles.example}>
        <Text>Horizontal Progress Indicator</Text>
        <ProgressBarAndroid styleAttr="Horizontal" />
      </View>
      <View style={styles.example}>
        <Text>Colored Progress Indicator</Text>
        <ProgressBarAndroid styleAttr="Horizontal" color="#2196F3" />
      </View>
      <View style={styles.example}>
        <Text>Fixed Progress Value</Text>
        <ProgressBarAndroid
          styleAttr="Horizontal"
          indeterminate={false}
          progress={0.5}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  example: {
    marginVertical: 24,
  },
});

export default App;

الخاصيات

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

‎‎animating‎‎

إظهار شريط التحميل (القيمة الافتراضيّة true) أو إخفائه (القيمة false).

النوع مطلوب
قيمة منطقيّة لا

‎‎color‎‎

لون شريط التحميل.

النوع مطلوب
لون لا

‎‎indeterminate‎‎

ما إذا كان شريط التحميل سيُظهر تقدّمًا غير مُحدّد. لاحظ أن هذا يمكن أن يكون ذا القيمة false فقط إذا كانت قيمةُ الخاصيّة styleAttr القيمةَ Horizontal، ويتطلب قيمةَ التقدّم progress.

النوع مطلوب
indeterminateType لا

‎‎progress‎‎

قيمة التّقدم (بين 0 و 1).

النوع مطلوب
عدد لا

‎‎styleAttr‎‎

نمط شريط التقدم. واحدة من القيم التالية:

  • عمودي: Horizontal
  • عادي: Normal (القيمة الافتراضيّة)
  • صغير: Small
  • كبير: Large
  • معكوس: Inverse
  • صغير-معكوس: SmallInverse
  • كبير-معكوس: LargeInverse
النوع مطلوب
('Horizontal', 'Normal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse') لا

‎‎testID‎‎

يُستخدَم لتحديد موقع هذا العرض في الاختبارات الشاملة (end-to-end tests).

النوع مطلوب
سلسلة نصيّة لا

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=ReactNative/progressbarandroid&oldid=31593"