الفرق بين المراجعتين ل"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'; |
− | |||
− | |||
− | |||
− | |||
− | |||
− | } from 'react-native | ||
− | |||
− | + | const wait = (timeout) => { | |
− | return new Promise(resolve => | + | return new Promise(resolve => setTimeout(resolve, timeout)); |
− | |||
− | |||
} | } | ||
− | + | 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)); | ||
− | }, [ | + | }, []); |
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, | ||
− | |||
}, | }, | ||
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>colors</code> === | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | ===<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>=== | ||
− | حجم مؤشر | + | حجم مؤشر التحديث. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
+ | !القيمة الافتراضية | ||
!مطلوب | !مطلوب | ||
!المنصة | !المنصة | ||
|- | |- | ||
− | | | + | |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:// | + | * [https://reactnative.dev/docs/refreshcontrol صفحة RefreshControl في توثيق React Native الرسمي.] |
[[تصنيف:ReactNative]] | [[تصنيف:ReactNative]] | ||
+ | [[تصنيف:React Native Component]] |
المراجعة الحالية بتاريخ 14:02، 9 أكتوبر 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 الكبير |