المكون RefreshControl في React Native

يُستخدَم هذا المكوّن داخل مكوّن ScrollView أو مكوّن ListView لإضافة وظيفة التحديث بالسحب. عندما يكون المكوّن ScrollView في الموقع ‎‎scrollY: 0‎‎، يؤدي السحب لأسفل إلى تشغيل حَدَث ‎‎onRefresh‎‎.

مثال

إليك المثال التالي (تجربة حية):

import React from 'react';
import { RefreshControl, SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native';

const wait = (timeout) => {
  return new Promise(resolve => setTimeout(resolve, timeout));
}

const App = () => {
  const [refreshing, setRefreshing] = React.useState(false);

  const onRefresh = React.useCallback(() => {
    setRefreshing(true);
    wait(2000).then(() => setRefreshing(false));
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scrollView}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
          />
        }
      >
        <Text>Pull down to see RefreshControl indicator</Text>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollView: {
    flex: 1,
    backgroundColor: 'pink',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

ملاحظة: الخاصيّة ‎‎refreshing‎‎ مُتحكم فيها (controlled prop)، ولهذا السبب يجب تعيين القيمة true لها في دالة onRefresh وإلا سيتوقف مؤشر التحديث فورًا.

الخاصيات

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

‎‎refreshing‎‎

ما إذا كان على الواجهة أن تشير إلى تحديث قيد العمل.

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

‎‎colors‎‎

الألوان (واحد على الأقل) التي ستُستخدَم لرسم مؤشر التحديث.

النوع	مطلوب	المنصة
مصفوفة ألوان	لا	Android

‎‎enabled‎‎

ما إذا تم تمكين وظيفة التحديث بالسحب.

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

‎onRefresh‎‎

دالةٌ تُستدعى عندما تبدأ الواجهة بالتحديث.

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

‎‎progressBackgroundColor‎‎

لون خلفية مؤشر التحديث.

النوع	مطلوب	المنصة
لون	لا	Android

‎‎progressViewOffset‎‎

الإزاحة العلويّة لعرض التقدم.

النوع	القيمة الافتراضية	مطلوب	المنصة
عدد	0	لا	Android

‎‎size‎‎

حجم مؤشر التحديث.

النوع	القيمة الافتراضية	مطلوب	المنصة
RefreshControl.SIZE	RefreshLayoutConsts.SIZE.DEFAULT	لا	Android

‎‎tintColor‎‎

لون مؤشر التحديث.

النوع	مطلوب	المنصة
لون	لا	iOS

‎‎title‎‎

العنوان المعروض تحت مؤشر التحديث.

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

‎‎titleColor‎‎

لون العنوان.

النوع	مطلوب	المنصة
لون	لا	iOS

تعريفات الأنواع

RefreshLayoutConsts.SIZE

ثوابت مكون SwipeRefreshLayout الخاص بمنصة Android. قد يتغير الحجم الحقيقي لمكون نسبة للجهاز المستعمل، ويمكنك قراءة المزيد حول المكونات الأصيلة في توثيق Android الرسمي.

النوع
تعداد enum

الثوابت:

الاسم	النوع	القيمة	الوصف
DEFAULT	عدد صحيح Int	1	حجم RefreshControl الافتراضي
LARGE	عدد صحيح Int	0	حجم RefreshControl الكبير

مصادر

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