المكون 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

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

animating

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

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

color

لون المؤشّر .

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

hidesWhenStopped

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

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

size

حجم المؤشر.

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

مصادر

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