الواجهة ActionSheetIOS في React Native

تعرض مكون ورقة إجراءات 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) {
      /* إجراء تدميريّ */
    }
  },
);

‎‎showShareActionSheetWithOptions()‎‎

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‎‎ معاملين:

• قيمةٌ منطقيةٌ تدل على النجاح أو الفشل.
• سلسلة نصيّةٌ تشير إلى طريقة المشاركة في حالة النجاح.

مصادر

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