الفرق بين المراجعتين لصفحة: «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') | ||
|لا | |لا | ||
|} | |} | ||
===<code>testID</code>=== | ===<code>testID</code>=== | ||
يُستخدَم لتحديد موقع هذا العرض في الاختبارات | يُستخدَم لتحديد موقع هذا العرض في الاختبارات الشاملة (end-to-end tests). | ||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 103: | سطر 116: | ||
|لا | |لا | ||
|} | |} | ||
[[تصنيف:ReactNative]] | |||
== مصادر == | == مصادر == | ||
* [https:// | * [https://reactnative.dev/docs/progressbarandroid صفحة ProgressBarAndroid في توثيق React Native الرسمي.] | ||
[[تصنيف: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).
النوع | مطلوب |
---|---|
سلسلة نصيّة | لا |