الفرق بين المراجعتين لصفحة: «ReactNative/progressbarandroid»
جميل-بيلوني (نقاش | مساهمات) ط مراجعة |
|||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE: ProgressBarAndroid في React Native}}</noinclude> | <noinclude>{{DISPLAYTITLE:المكون ProgressBarAndroid في React Native}}</noinclude> | ||
<blockquote>'''مهمل''': استعمل إحدى [https://reactnative.directory/?search=progressbar هذه الحزم من المجتمع] بدلًا منه. </blockquote>مكوّن [[React]] يعمل على نظام Android فقط، يُستخدم للإشارة إلى أن التطبيق قيد التحميل (loading) أو أن هناك بعض الأنشطة قيد التنفيذ في التطبيق. | |||
مثال: | إليك مثال ([https://snack.expo.dev/@hsoubwiki/progressbarandroid تجربة حية]): | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
import React | import React from 'react'; | ||
import { | import {View, StyleSheet, ProgressBarAndroid, Text} from 'react-native'; | ||
const App = () => { | |||
return ( | |||
<View style={styles.container}> | |||
<View style={styles. | <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: ' | justifyContent: 'center', | ||
alignItems: 'center', | |||
}, | |||
example: { | |||
marginVertical: 24, | |||
}, | }, | ||
}); | }); | ||
export default App; | |||
</syntaxhighlight> | </syntaxhighlight> | ||
== الخاصيات == | == الخاصيات == | ||
سطر 88: | سطر 103: | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
| | |('Horizontal', 'Normal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse') | ||
|لا | |لا | ||
|} | |} | ||
سطر 104: | سطر 119: | ||
== مصادر == | == مصادر == | ||
* [https:// | * [https://reactnative.dev/docs/progressbarandroid صفحة ProgressBarAndroid في توثيق React Native الرسمي.] |
مراجعة 14:47، 29 سبتمبر 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).
النوع | مطلوب |
---|---|
سلسلة نصيّة | لا |