ProgressBarAndroid في React Native

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

مثال:

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <ProgressBarAndroid />
        <ProgressBarAndroid styleAttr="Horizontal" />
        <ProgressBarAndroid styleAttr="Horizontal" color="#2196F3" />
        <ProgressBarAndroid
          styleAttr="Horizontal"
          indeterminate={false}
          progress={0.5}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-evenly',
    padding: 10,
  },
});

الخاصيات

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

‎‎animating‎‎

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

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

‎‎color‎‎

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

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

‎‎indeterminate‎‎

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

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

‎‎progress‎‎

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

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

‎‎styleAttr‎‎

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

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

النوع	مطلوب
enum('Horizontal', 'Normal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse')	لا

‎‎testID‎‎

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

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

مصادر

• صفحة ProgressBarAndroid في توثيق React Native الرسمي.