الفرق بين المراجعتين ل"ReactNative/actionsheetios"
جميل-بيلوني (نقاش | مساهمات) ط (مراجعة) |
جميل-بيلوني (نقاش | مساهمات) ط |
||
سطر 106: | سطر 106: | ||
* [https://facebook.github.io/react-native/docs/actionsheetios صفحة ActionSheetIOS في توثيق React Native الرسمي.] | * [https://facebook.github.io/react-native/docs/actionsheetios صفحة ActionSheetIOS في توثيق React Native الرسمي.] | ||
[[تصنيف:ReactNative]] | [[تصنيف:ReactNative]] | ||
+ | [[تصنيف:React Native API]] |
المراجعة الحالية بتاريخ 14:14، 9 أكتوبر 2021
تعرض مكون ورقة إجراءات iOS الأصيل (Action Sheet component).
مثال
إليك المثال التالي (تجربة حية):
import React, { useState } from "react";
import { ActionSheetIOS, Button, StyleSheet, Text, View } from "react-native";
const App = () => {
const [result, setResult] = useState("🔮");
const onPress = () =>
ActionSheetIOS.showActionSheetWithOptions(
{
options: ["Cancel", "Generate number", "Reset"],
destructiveButtonIndex: 2,
cancelButtonIndex: 0,
userInterfaceStyle: 'dark'
},
buttonIndex => {
if (buttonIndex === 0) {
// cancel action
} else if (buttonIndex === 1) {
setResult(Math.floor(Math.random() * 100) + 1);
} else if (buttonIndex === 2) {
setResult("🔮");
}
}
);
return (
<View style={styles.container}>
<Text style={styles.result}>{result}</Text>
<Button onPress={onPress} title="Show Action Sheet" />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center"
},
result: {
fontSize: 64,
textAlign: "center"
}
});
export default App;
التوابع
showActionSheetWithOptions()
static showActionSheetWithOptions(options, callback)
عرض ورقة إجراءات iOS. يجب أن يحتوي كائن options
على عنصر واحدٍ أو أكثر ممّا يلي:
-
options
(مصفوفةُ سلاسلَ نصيّة): قائمة عناوين الأزرار (مطلوب). -
cancelButtonIndex
(عدد صحيح [int]): فهرس زر الإلغاء في مصفوفة options
. -
destructiveButtonIndex
(عدد صحيح): فهرس الزر التدميريّ (إجراء خطير كحذف بيانات أو ما شابه) في مصفوفة options
. -
title
(سلسلة نصيّة): عنوان لإظهاره أعلى ورقة الإجراءات. -
message
(سلسلة نصيّة): رسالة لإظهارها أسفل العنوان. -
anchor
(عدد [number]): العقدة التي يجب أن تُقامَ عليها ورقة الإجراءات (تُستخدَم لأجهزة iPad). -
tintColor
(سلسلة نصيّة): اللون المستخدم لعناوين الأزرار غير التدميريّة. - disabledButtonIndices (مصفوفة من الأعداد): قائمة فهارس الأزرار الواجب تعطيلها.
- userInterfaceStyle (سلسلة نصية): تنسيق الواجهة المستعمل مع ورقة الإجراءات، ويمكن أن يُضبط إلى
light
أوdark
أو ستُضبط بحسب القيمة الافتراضية للنظام عمومًا.
تأخذ دالة رد النداء (callback
) مُعاملًا واحدًا، وهو الفهرس القائم على الصفر (zero-based index) للعنصر المحدد.
مثال بسيط:
ActionSheetIOS.showActionSheetWithOptions(
{
options: ['Cancel', 'Remove'],
destructiveButtonIndex: 1,
cancelButtonIndex: 0,
},
(buttonIndex) => {
if (buttonIndex === 1) {
/* إجراء تدميريّ */
}
},
);
static showShareActionSheetWithOptions(options, failureCallback, successCallback)
عرض ورقة مشاركةٍ (share sheet) في iOS. يجب أن يحتوي كائن الخيارات (options
) على قيمة message
أو url
أو كليهما، ويمكن أن يحتوي أيضًا على subject
أو excludedActivityTypes
:
-
url
(سلسلة نصيّة): عنوان URL لمشاركته. -
message
(سلسلة نصيّة): رسالة لمشاركتها. -
subject
(سلسلة نصيّة): موضوعٌ للرسالة. -
excludedActivityTypes
(مصفوفة): الأنشطة التي يجب استبعادها من ورقة الإجراءات.
ملاحظة: إذا كان عنوان url
يشير إلى ملف محليّ، أو إذا كان عنوانَ uri ذا التشفير base64، فسيُحمَّل الملف الذي يشير إليه ويُشارَكُ مباشرة. يمكنك بهذه الطريقة مشاركة الصور ومقاطع الفيديو وملفات PDF، إلخ.
تأخذ الدالة failureCallback
معاملًا واحدًا يُمثِّل كائنَ خطأ (error object). الخاصية الوحيدة المُعرَّفة على هذا الكائن هي خاصيةُ stack
نصيّةٌ اختياريّة.
تأخذ الدالة successCallback
معاملين:
- قيمةٌ منطقيةٌ تدل على النجاح أو الفشل.
- سلسلة نصيّةٌ تشير إلى طريقة المشاركة في حالة النجاح.