ActivityIndicator في React Native

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

مثال

• مثال لمكون الصنف (Class Component)

import React, { Component } from "react";
import { ActivityIndicator, StyleSheet, Text, View } from "react-native";

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

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

export default App;

• مثال لمكون الدالة (Function Component)

import React from "react";
import { ActivityIndicator, StyleSheet, Text, View } from "react-native";

const App = () => (
  <View style={[styles.container, styles.horizontal]}>
    <ActivityIndicator />
    <ActivityIndicator size="large" />
    <ActivityIndicator size="small" color="#0000ff" />
    <ActivityIndicator size="large" color="#00ff00" />
  </View>
);

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

export default App;

الخاصيات

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

animating

إظهار المؤشر (true) أو إخفاؤه (false).

النوع	مطلوب	القيمة الافتراضية
قيمة منطقيّة	لا	true

color

لون المؤشّر .

النوع	مطلوب	القيمة الافتراضية
color	لا	الرمادي '#999999' على نظام التشغيل iOS null (اللون الافتراضي للنظام) في نظام Android

hidesWhenStopped

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

النوع	مطلوب	القيمة الافتراضية	المنصة
قيمة منطقيّة	لا	true	iOS

size

حجم المؤشر.

النوع	مطلوب	القيمة الافتراضية
enum('small', 'large')	لا	'small'
عدد على Android

مصادر

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