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

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(أنشأ الصفحة ب' = Share = == مثال == * مثال لمكون دالة (Function Component Example): <syntaxhighlight lang="javascript"> import React from 'react'; import { Share, V...')
 
ط
 
(4 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
 
+
<noinclude>{{DISPLAYTITLE:الواجهة Share في React Native}}</noinclude>
= Share =
+
__toc__
 
 
 
== مثال ==
 
== مثال ==
  
* مثال لمكون دالة (Function Component Example):
+
* [https://snack.expo.dev/@hsoubwiki/share-function-component-example مثال لمكوّن دالّة (Function Component Example)]
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
import React from 'react';
 
import React from 'react';
 
import { Share, View, Button } from 'react-native';
 
import { Share, View, Button } from 'react-native';
+
 
 
const ShareExample = () => {
 
const ShareExample = () => {
 const onShare = async () => {
+
  const onShare = async () => {
   try {
+
    try {
     const result = await Share.share({
+
      const result = await Share.share({
       message:
+
        message:
         'React Native | A framework for building native apps using React',
+
          'React Native | A framework for building native apps using React',
     });
+
      });
     if (result.action === Share.sharedAction) {
+
      if (result.action === Share.sharedAction) {
       if (result.activityType) {
+
        if (result.activityType) {
         // shared with activity type of result.activityType
+
          // shared with activity type of result.activityType
       } else {
+
        } else {
         // shared
+
          // shared
       }
+
        }
     } else if (result.action === Share.dismissedAction) {
+
      } else if (result.action === Share.dismissedAction) {
       // dismissed
+
        // dismissed
     }
+
      }
   } catch (error) {
+
    } catch (error) {
     alert(error.message);
+
      alert(error.message);
   }
+
    }
 
   };
 
   };
 return (
+
  return (
   <View style={{ marginTop: 50 }}>
+
    <View style={{ marginTop: 50 }}>
     <Button onPress={onShare} title="Share" />
+
      <Button onPress={onShare} title="Share" />
   </View>
+
    </View>
 
   );
 
   );
 
};
 
};
+
 
 
export default ShareExample;
 
export default ShareExample;
 
 
</syntaxhighlight>
 
</syntaxhighlight>
  
* مثال لمكون صنف (Class Component Example)
+
* [https://snack.expo.dev/@hsoubwiki/share-class-component-example مثال لمكوّن صنف (Class Component Example)]
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
import React, { Component } from 'react';
 
import React, { Component } from 'react';
 
import { Share, View, Button } from 'react-native';
 
import { Share, View, Button } from 'react-native';
+
 
 
class ShareExample extends Component {
 
class ShareExample extends Component {
 onShare = async () => {
+
  onShare = async () => {
   try {
+
    try {
     const result = await Share.share({
+
      const result = await Share.share({
       message:
+
        message:
         'React Native | A framework for building native apps using React',
+
          'React Native | A framework for building native apps using React',
     });
+
      });
+
 
     if (result.action === Share.sharedAction) {
+
      if (result.action === Share.sharedAction) {
       if (result.activityType) {
+
        if (result.activityType) {
         // shared with activity type of result.activityType
+
          // shared with activity type of result.activityType
       } else {
+
        } else {
         // shared
+
          // shared
       }
+
        }
     } else if (result.action === Share.dismissedAction) {
+
      } else if (result.action === Share.dismissedAction) {
       // dismissed
+
        // dismissed
     }
+
      }
   } catch (error) {
+
    } catch (error) {
     alert(error.message);
+
      alert(error.message);
   }
+
    }
 
   };
 
   };
+
 
 render() {
+
  render() {
   return (
+
    return (
     <View style={{ marginTop: 50 }}>
+
      <View style={{ marginTop: 50 }}>
       <Button onPress={this.onShare} title="Share" />
+
        <Button onPress={this.onShare} title="Share" />
     </View>
+
      </View>
   );
+
    );
 
   }
 
   }
 
}
 
}
+
 
 
export default ShareExample;
 
export default ShareExample;
 
</syntaxhighlight>
 
</syntaxhighlight>
  
== التّوابع ==
+
== التوابع ==
  
 
=== <code>share()‎</code> ===
 
=== <code>share()‎</code> ===
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
static share(content, options)
 
static share(content, options)
</syntaxhighlight>يقوم بفتح مربّع حوارٍ لمشاركة محتوىً نصيٍّ.
+
</syntaxhighlight>يفتح هذا التّابع مربّع حوارٍ لمشاركة محتوىً نصيٍّ، وعند استخدامه على المنصة iOS، فهو يُعيد وعدًا (Promise) يقبَل بواسطة كائنٍ يحوي مفتاحين <code>action</code>، و<code>activityType</code>، إذا رفض المستخدم مربّع الحوار، فإن الوعد سيستدعى بجعل قيمة المفتاح <code>action</code> مساويةً لـ <code>Share.dismissedAction</code>، مع ترك بقية المفاتيح دون تعريفٍ، إلى جانب ملاحظة أنّ بعض خيارات المشاركة لن تظهر، أو لن تعمل عند العمل على محاكي iOS؛ أمّا عند استخدامه على منصّة Android، فسيُعيد وعدًا يُقبل دائمًا بجعل قيمة المفتاح <code>action</code> مساويةً <code>Share.sharedAction</code>.
 
 
عند استخدامه على المنصة iOS فإنّه يُعيد وعدًا (Promise) يقبَل بواسطة كائنٍ يحوي مفتاحين <code>action</code> و <code>activityType</code>، إذا رفض المستخدم مربّع الحوار فإن الوعد سيستدعى بجعل قيمة المفتاح <code>action</code> مساويةً <code>Share.dismissedAction</code> مع ترك بقية المفاتيح دون تعريفٍ. مع ملاحظة أن بعض خيارات المشاركة لن تظهر أو لن تعمل عند العمل على محاكي iOS.
 
 
 
أما عند استخدامه على منصّة Android فإنه يُعيد وعدًا يُقبل دائمًا بجعل قيمة المفتاح <code>action</code> مساويةً <code>Share.sharedAction</code>.
 
 
 
=== المحتوى (content) ===
 
 
 
* <code>message</code> :  الرّسالة المُراد مشاركتها.
 
 
 
==== على منصّة iOS ====
 
 
 
* <code>url</code> : رابط (URL) المراد مشاركته.
 
 
 
يتطلّب رابطًا واحدًا ورسالةً واحدةً على الأقلّ.
 
 
 
==== على منصّة Android ====
 
 
 
* <code>title</code>: عنوان الرّسالة المُراد مشاركتها.
 
 
 
=== الخيارات (options) ===
 
 
 
==== على منصة iOS ====
 
  
* <code>subject</code> : الموضوع المُراد مشاركته عبر البريد الالكتروني
+
الخاصيات:
* <code>excludedActivityTypes</code>
+
{| class="wikitable"
* <code>tintColor</code> 
+
!الاسم
 +
!النوع
 +
!مطلوب
 +
!الوصف
 +
|-
 +
|<code>content</code>
 +
|كائن
 +
|نعم
 +
|كائن فيه الخاصيات التالية:
  
==== على منصّة Android ====
+
* <code>message</code>:  الرّسالة المُراد مشاركتها.
 +
* <code>url</code>: ( منصة iOS) رابط (URL) المراد مشاركته، ويتطلّب رابطًا واحدًا، ورسالةً واحدةً على الأقلّ.
 +
* <code>title</code>: (منصة Android) عنوان الرّسالة المُراد مشاركتها.
 +
|-
 +
|<code>options</code>
 +
|كائن
 +
|لا
 +
|كائن فيه الخاصيات التالية:
 +
<code>dialogTitle</code> (منصة Android)
 +
*<code>subject</code>: ( منصة iOS) الموضوع المُراد مشاركته عبر البريد الالكتروني
 +
*<code>excludedActivityTypes</code>: ( منصة iOS)
 +
*<code>tintColor</code>: ( منصة iOS)
 +
|}
  
* <code>dialogTitle</code> 
+
== الخاصيات ==
  
 
=== <code>sharedAction</code> ===
 
=== <code>sharedAction</code> ===
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
static sharedAction
 
static sharedAction
</syntaxhighlight>تمّت مشاركة المحتوى بنجاحٍ.
+
</syntaxhighlight>وتعني أنّه قد تمّت مشاركة المحتوى بنجاحٍ.
  
 
=== <code>dismissedAction</code> ===
 
=== <code>dismissedAction</code> ===
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
static dismissedAction
 
static dismissedAction
</syntaxhighlight>تم رفض صندوق الحوار هذا، ويُستخدم على منصّة  iOS فقط.  
+
</syntaxhighlight>والمقصود بها أنّه قد تم رفض صندوق الحوار هذا، ويُستخدم على منصّة  iOS فقط.  
  
 
== مصادر ==
 
== مصادر ==
  
 
* [https://facebook.github.io/react-native/docs/share صفحة Share في توثيق React Native الرسميّ]
 
* [https://facebook.github.io/react-native/docs/share صفحة Share في توثيق React Native الرسميّ]
 +
[[تصنيف:ReactNative]]
 +
[[تصنيف:React Native API]]

المراجعة الحالية بتاريخ 14:13، 9 أكتوبر 2021

مثال

import React from 'react';
import { Share, View, Button } from 'react-native';

const ShareExample = () => {
  const onShare = async () => {
    try {
      const result = await Share.share({
        message:
          'React Native | A framework for building native apps using React',
      });
      if (result.action === Share.sharedAction) {
        if (result.activityType) {
          // shared with activity type of result.activityType
        } else {
          // shared
        }
      } else if (result.action === Share.dismissedAction) {
        // dismissed
      }
    } catch (error) {
      alert(error.message);
    }
  };
  return (
    <View style={{ marginTop: 50 }}>
      <Button onPress={onShare} title="Share" />
    </View>
  );
};

export default ShareExample;
import React, { Component } from 'react';
import { Share, View, Button } from 'react-native';

class ShareExample extends Component {
  onShare = async () => {
    try {
      const result = await Share.share({
        message:
          'React Native | A framework for building native apps using React',
      });

      if (result.action === Share.sharedAction) {
        if (result.activityType) {
          // shared with activity type of result.activityType
        } else {
          // shared
        }
      } else if (result.action === Share.dismissedAction) {
        // dismissed
      }
    } catch (error) {
      alert(error.message);
    }
  };

  render() {
    return (
      <View style={{ marginTop: 50 }}>
        <Button onPress={this.onShare} title="Share" />
      </View>
    );
  }
}

export default ShareExample;

التوابع

share()‎

static share(content, options)

يفتح هذا التّابع مربّع حوارٍ لمشاركة محتوىً نصيٍّ، وعند استخدامه على المنصة iOS، فهو يُعيد وعدًا (Promise) يقبَل بواسطة كائنٍ يحوي مفتاحين action، وactivityType، إذا رفض المستخدم مربّع الحوار، فإن الوعد سيستدعى بجعل قيمة المفتاح action مساويةً لـ Share.dismissedAction، مع ترك بقية المفاتيح دون تعريفٍ، إلى جانب ملاحظة أنّ بعض خيارات المشاركة لن تظهر، أو لن تعمل عند العمل على محاكي iOS؛ أمّا عند استخدامه على منصّة Android، فسيُعيد وعدًا يُقبل دائمًا بجعل قيمة المفتاح action مساويةً Share.sharedAction.

الخاصيات:

الاسم النوع مطلوب الوصف
content كائن نعم كائن فيه الخاصيات التالية:
  • message: الرّسالة المُراد مشاركتها.
  • url: ( منصة iOS) رابط (URL) المراد مشاركته، ويتطلّب رابطًا واحدًا، ورسالةً واحدةً على الأقلّ.
  • title: (منصة Android) عنوان الرّسالة المُراد مشاركتها.
options كائن لا كائن فيه الخاصيات التالية:

dialogTitle (منصة Android)

  • subject: ( منصة iOS) الموضوع المُراد مشاركته عبر البريد الالكتروني
  • excludedActivityTypes: ( منصة iOS)
  • tintColor: ( منصة iOS)

الخاصيات

sharedAction

static sharedAction

وتعني أنّه قد تمّت مشاركة المحتوى بنجاحٍ.

dismissedAction

static dismissedAction

والمقصود بها أنّه قد تم رفض صندوق الحوار هذا، ويُستخدم على منصّة iOS فقط.

مصادر