ActivityIndicator في React Native

يعرض مؤشّر تحميل دائريّ.

مثال

import React, { Component } from 'react'
import {
  ActivityIndicator,
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native'

export default class App extends Component {
  render() {
    return (
      <View style={[styles.container, styles.horizontal]}>
        <ActivityIndicator size="large" color="#0000ff" />
        <ActivityIndicator size="small" color="#00ff00" />
        <ActivityIndicator size="large" color="#0000ff" />
        <ActivityIndicator size="small" color="#00ff00" />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  },
  horizontal: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    padding: 10
  }
})

AppRegistry.registerComponent('App', () => App)

الخاصيات

• خاصيّات View
• animating
• color
• hidesWhenStopped
• size

animating

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

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

color

لون المؤشّر (الافتراضي هو الرمادي على نظام التشغيل iOS والسماوي الغامق على نظام Android).

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

hidesWhenStopped

ما إذا كان يجب إخفاء المؤشر عند عدم تحريكه (animating) (القيمة true افتراضيًا).

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

size

حجم المؤشر ("small" افتراضيًا). تمرير عددٍ إلى هذه الخاصيّة مدعوم فقط على Android.

النوع	مطلوب
enum('small', 'large') أو عدد	لا

مصادر

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