الفرق بين المراجعتين ل"ReactNative/refreshcontrol"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE: RefreshControl في React Native}}</noinclude> يُستخدَم هذا المكوّن داخل مكوّن ScrollView أو مكوّن ListView...')
 
ط (مراجعة)
سطر 1: سطر 1:
−
<noinclude>{{DISPLAYTITLE: RefreshControl في React Native}}</noinclude>
+
<noinclude>{{DISPLAYTITLE:المكون RefreshControl في React Native}}</noinclude>
−
يُستخدَم هذا المكوّن داخل مكوّن ScrollView أو مكوّن ListView لإضافة وظيفة التحديث بالسحب. عندما يكون المكوّن ScrollView في الموقع  ‎‎<code>scrollY: 0</code>‎‎، يؤدي السحب لأسفل إلى تشغيل حَدَث ‎‎<code>onRefresh</code>‎‎.
+
يُستخدَم هذا المكوّن داخل مكوّن <code>[[ReactNative/scrollview|ScrollView]]</code> أو مكوّن <code>[[ReactNative/listview|ListView]]</code> لإضافة وظيفة التحديث بالسحب. عندما يكون المكوّن <code>ScrollView</code> في الموقع  ‎‎<code>scrollY: 0</code>‎‎، يؤدي السحب لأسفل إلى تشغيل حَدَث ‎‎<code>onRefresh</code>‎‎.
 
==مثال==
 
==مثال==
−
<syntaxhighlight lang="javascript">
+
إليك المثال التالي ([https://snack.expo.dev/@hsoubwiki/refreshcontrol تجربة حية]):<syntaxhighlight lang="javascript">
 
import React from 'react';
 
import React from 'react';
−
import {
+
import { RefreshControl, SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native';
−
  ScrollView,
 
−
  RefreshControl,
 
−
  StyleSheet,
 
−
  Text,
 
−
  SafeAreaView,
 
−
} from 'react-native';
 
−
import Constants from 'expo-constants';
 
  
−
function wait(timeout) {
+
const wait = (timeout) => {
−
   return new Promise(resolve => {
+
   return new Promise(resolve => setTimeout(resolve, timeout));
−
    setTimeout(resolve, timeout);
 
−
  });
 
 
}
 
}
  
−
export default function App() {
+
const App = () => {
 
   const [refreshing, setRefreshing] = React.useState(false);
 
   const [refreshing, setRefreshing] = React.useState(false);
  
 
   const onRefresh = React.useCallback(() => {
 
   const onRefresh = React.useCallback(() => {
 
     setRefreshing(true);
 
     setRefreshing(true);
−
 
 
     wait(2000).then(() => setRefreshing(false));
 
     wait(2000).then(() => setRefreshing(false));
−
   }, [refreshing]);
+
   }, []);
  
 
   return (
 
   return (
سطر 33: سطر 23:
 
         contentContainerStyle={styles.scrollView}
 
         contentContainerStyle={styles.scrollView}
 
         refreshControl={
 
         refreshControl={
−
           <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+
           <RefreshControl
 +
            refreshing={refreshing}
 +
            onRefresh={onRefresh}
 +
          />
 
         }
 
         }
 
       >
 
       >
سطر 45: سطر 38:
 
   container: {
 
   container: {
 
     flex: 1,
 
     flex: 1,
−
    marginTop: Constants.statusBarHeight,
 
 
   },
 
   },
 
   scrollView: {
 
   scrollView: {
سطر 54: سطر 46:
 
   },
 
   },
 
});
 
});
 +
 +
export default App;
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
'''ملاحظة:''' الخاصيّة ‎‎<code>refreshing</code>‎‎ مُتحكم فيها (controlled prop)، ولهذا السبب يجب تعيين القيمة true لها في دالة onRefresh وإلا سيتوقف مؤشر التحديث فورًا.
+
'''ملاحظة:''' الخاصيّة ‎‎<code>refreshing</code>‎‎ مُتحكم فيها (controlled prop)، ولهذا السبب يجب تعيين القيمة <code>true</code> لها في دالة <code>onRefresh</code> وإلا سيتوقف مؤشر التحديث فورًا.
 
== الخاصيات ==
 
== الخاصيات ==
 
يرث خاصيّات المكوّن <code>[[ReactNative/view|View]]</code>.
 
يرث خاصيّات المكوّن <code>[[ReactNative/view|View]]</code>.
  
 
===‎‎<code>refreshing</code>‎‎===
 
===‎‎<code>refreshing</code>‎‎===
−
ما إذا كان على العرض أن يشير إلى تحديث قيد العمل.
+
ما إذا كان على الواجهة أن تشير إلى تحديث قيد العمل.
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
سطر 70: سطر 64:
 
|}
 
|}
  
−
===‎‎<code>onRefresh</code>‎‎===
+
=== ‎‎<code>colors</code>‎‎ ===
−
دالةٌ تُستدعى عندما يبدأ العرض بالتحديث.
 
−
{| class="wikitable"
 
−
!النوع
 
−
!مطلوب
 
−
|-
 
−
|دالة
 
−
|لا
 
−
|}
 
−
===‎‎<code>colors</code>‎‎===
 
 
الألوان (واحد على الأقل) التي ستُستخدَم لرسم مؤشر التحديث.
 
الألوان (واحد على الأقل) التي ستُستخدَم لرسم مؤشر التحديث.
 
{| class="wikitable"
 
{| class="wikitable"
سطر 86: سطر 71:
 
!المنصة
 
!المنصة
 
|-
 
|-
−
|مصفوفة ألوان
+
|مصفوفة [[ReactNative/colors|ألوان]]
 
|لا
 
|لا
 
|Android
 
|Android
سطر 95: سطر 80:
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
 +
!القيمة الافتراضية
 
!مطلوب
 
!مطلوب
 
!المنصة
 
!المنصة
 
|-
 
|-
 
|قيمة منطقية
 
|قيمة منطقية
 +
|true
 
|لا
 
|لا
 
|Android
 
|Android
 
|}
 
|}
  
 +
=== ‎<code>onRefresh</code>‎‎ ===
 +
دالةٌ تُستدعى عندما تبدأ الواجهة بالتحديث.
 +
{| class="wikitable"
 +
!النوع
 +
!مطلوب
 +
|-
 +
|دالة
 +
|لا
 +
|}
 
===‎‎<code>progressBackgroundColor</code>‎‎===
 
===‎‎<code>progressBackgroundColor</code>‎‎===
 
لون خلفية مؤشر التحديث.
 
لون خلفية مؤشر التحديث.
سطر 110: سطر 106:
 
!المنصة
 
!المنصة
 
|-
 
|-
−
|لون
+
|[[ReactNative/colors|لون]]
 
|لا
 
|لا
 
|Android
 
|Android
سطر 119: سطر 115:
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
 +
!القيمة الافتراضية
 
!مطلوب
 
!مطلوب
 
!المنصة
 
!المنصة
 
|-
 
|-
 
|عدد
 
|عدد
 +
|0
 
|لا
 
|لا
 
|Android
 
|Android
سطر 128: سطر 126:
  
 
===‎‎<code>size</code>‎‎===
 
===‎‎<code>size</code>‎‎===
−
حجم مؤشر التحديث، راجع RefreshControl.SIZE.
+
حجم مؤشر التحديث.
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
 +
!القيمة الافتراضية
 
!مطلوب
 
!مطلوب
 
!المنصة
 
!المنصة
 
|-
 
|-
−
|‎‎<code>enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE)</code>‎‎
+
|RefreshControl.SIZE
 +
|RefreshLayoutConsts.SIZE.DEFAULT
 
|لا
 
|لا
 
|Android
 
|Android
سطر 146: سطر 146:
 
!المنصة
 
!المنصة
 
|-
 
|-
−
|لون
+
|[[ReactNative/colors|لون]]
 
|لا
 
|لا
 
|iOS
 
|iOS
سطر 170: سطر 170:
 
!المنصة
 
!المنصة
 
|-
 
|-
−
|لون
+
|[[ReactNative/colors|لون]]
 
|لا
 
|لا
 
|iOS
 
|iOS
 +
|}
 +
 +
== تعريفات الأنواع ==
 +
 +
=== <code>RefreshLayoutConsts.SIZE</code> ===
 +
ثوابت مكون SwipeRefreshLayout الخاص بمنصة Android. قد يتغير الحجم الحقيقي لمكون نسبة للجهاز المستعمل، ويمكنك قراءة المزيد حول المكونات الأصيلة في [https://developer.android.com/reference/androidx/swiperefreshlayout/widget/SwipeRefreshLayout توثيق Android الرسمي].
 +
{| class="wikitable"
 +
!النوع
 +
|-
 +
|تعداد enum
 +
|}
 +
الثوابت:
 +
{| class="wikitable"
 +
!الاسم
 +
!النوع
 +
!القيمة
 +
!الوصف
 +
|-
 +
|DEFAULT
 +
|عدد صحيح Int
 +
|1
 +
|حجم RefreshControl الافتراضي
 +
|-
 +
|LARGE
 +
|عدد صحيح Int
 +
|0
 +
|حجم RefreshControl الكبير
 
|}
 
|}
 
== مصادر ==
 
== مصادر ==
−
* [https://facebook.github.io/react-native/docs/refreshcontrol صفحة RefreshControl في توثيق React Native الرسمي.]
+
* [https://reactnative.dev/docs/refreshcontrol صفحة RefreshControl في توثيق React Native الرسمي.]
 
[[تصنيف:ReactNative]]
 
[[تصنيف:ReactNative]]

مراجعة 15:08، 29 سبتمبر 2021

يُستخدَم هذا المكوّن داخل مكوّن 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 الكبير

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=ReactNative/refreshcontrol&oldid=31342"