عرض مصدر ReactNative/toastandroid

<noinclude>{{DISPLAYTITLE:الواجهة ToastAndroid في React Native}}</noinclude>
تعرض الواجهة البرمجيّة (ToastAndroid API) في [[ReactNative|React Native]] وحدة ToastAndroid الخاصّة بمنصّات Android على شكل وحدة جافا سكربت JS، كما تُقدِّم التّابع <code>(show(message, duration</code>، الذي يأخذ المعاملات التّالية: 

* <code>message</code>: الرّسالة التي ستعرض كإشعارٍ مصغَّرٍ (toast).
* <code>duration</code>: المدّة الزّمنيّة لظهور الإشعار المصغَّر، ويأخذ إحدى القيمتين <code>ToastAndroid.SHORT</code>، أو <code>ToastAndroid.LONG</code>

ويمكن استخدام التابع <code>(showWithGravity(message, duration, gravity</code> لتحديد مكان ظهور الإشعار المصغًّر على الشاشة، عن طريق المعامل <code>gravity</code>، الذي يأخذ إحدى القيم التالية:

* <code>ToastAndroid.TOP</code>: إظهار الإشعار المصغَّر أعلى الشّاشة.
* <code>ToastAndroid.BOTTOM</code>: إظهار الإشعار المصغَّر أسفل الشّاشة.
* <code>ToastAndroid.CENTER</code>:  إظهار الإشعار المصغَّر منتصف الشّاشة.


يُضيف التّابع <code>showWithGravityAndOffset(message, duration, gravity, xOffset, yOffset)‎</code> إمكانيّة تحديد الإزاحة بالبكسل.

== مثال ==
إليك المثال البسيط التالي ([https://snack.expo.dev/@hsoubwiki/toast-android-api-example تجربة حية]):<syntaxhighlight lang="javascript">
import React from "react";
import { View, StyleSheet, ToastAndroid, Button, StatusBar } from "react-native";

const App = () => {
  const showToast = () => {
    ToastAndroid.show("A pikachu appeared nearby !", ToastAndroid.SHORT);
  };

  const showToastWithGravity = () => {
    ToastAndroid.showWithGravity(
      "All Your Base Are Belong To Us",
      ToastAndroid.SHORT,
      ToastAndroid.CENTER
    );
  };

  const showToastWithGravityAndOffset = () => {
    ToastAndroid.showWithGravityAndOffset(
      "A wild toast appeared!",
      ToastAndroid.LONG,
      ToastAndroid.BOTTOM,
      25,
      50
    );
  };

  return (
    <View style={styles.container}>
      <Button title="Toggle Toast" onPress={() => showToast()} />
      <Button
        title="Toggle Toast With Gravity"
        onPress={() => showToastWithGravity()}
      />
      <Button
        title="Toggle Toast With Gravity & Offset"
        onPress={() => showToastWithGravityAndOffset()}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: StatusBar.currentHeight,
    backgroundColor: "#888888",
    padding: 8
  }
});

export default App;
</syntaxhighlight>
__TOC__

تصنَّف الواجهة البرمجية ToastAndroid على أنّها واجهةٌ برمجيّةٌ أمرية، ومع ذلك توجد طريقة لإظهار (expose) المكونات التّصريحية (declarative)، منها كما هو موضّح في المثال المتقدم التّالي ([https://snack.expo.dev/@hsoubwiki/advanced-toast-android-api-example تجربة حية]):<syntaxhighlight lang="javascript">
import React, { useState, useEffect } from "react";
import { View, StyleSheet, ToastAndroid, Button, StatusBar } from "react-native";

const Toast = ({ visible, message }) => {
  if (visible) {
    ToastAndroid.showWithGravityAndOffset(
      message,
      ToastAndroid.LONG,
      ToastAndroid.BOTTOM,
      25,
      50
    );
    return null;
  }
  return null;
};

const App = () => {
  const [visibleToast, setvisibleToast] = useState(false);

  useEffect(() => setvisibleToast(false), [visibleToast]);

  const handleButtonPress = () => {
    setvisibleToast(true);
  };

  return (
    <View style={styles.container}>
      <Toast visible={visibleToast} message="Example" />
      <Button title="Toggle Toast" onPress={() => handleButtonPress()} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: StatusBar.currentHeight,
    backgroundColor: "#888888",
    padding: 8
  }
});

export default App;
</syntaxhighlight>

== التوابع ==

=== <code>show()‎</code> ===
<syntaxhighlight lang="javascript">
static show(message, duration)
</syntaxhighlight>

=== <code>showWithGravity()‎</code> ===
<syntaxhighlight lang="javascript">
static showWithGravity(message, duration, gravity)
</syntaxhighlight>

=== <code>showWithGravityAndOffset()‎</code> ===
<syntaxhighlight lang="javascript">
static showWithGravityAndOffset(message, duration, gravity, xOffset, yOffset)
</syntaxhighlight>

== الخاصيات ==

=== <code>SHORT</code> ===
تدلّ هذه الخاصّية على مدّة بقاء الإشعار المصغَّر على الشّاشة.<syntaxhighlight lang="javascript">
ToastAndroid.SHORT;
</syntaxhighlight>

=== <code>LONG</code> ===
تدلّ هذه الخاصّية على مدّة بقاء الإشعار المصغَّر على الشّاشة.<syntaxhighlight lang="javascript">
ToastAndroid.LONG;
</syntaxhighlight>

=== <code>TOP</code> ===
تدلّ الخاصية <code>TOP</code>على مكان توضُّع الإشعار المصغَّر على الشّاشة.<syntaxhighlight lang="javascript">
ToastAndroid.TOP;
</syntaxhighlight>

=== <code>BOTTOM</code> ===
تدلّ الخاصية <code>BOTTOM</code> على مكان توضُّع الإشعار المصغَّر على الشّاشة.<syntaxhighlight lang="javascript">
ToastAndroid.BOTTOM;
</syntaxhighlight>

=== <code>CENTER</code> ===
تدلّ <code>CENTER</code> على مكان توضُّع الإشعار المصغَّر على الشّاشة.<syntaxhighlight lang="javascript">
ToastAndroid.CENTER;
</syntaxhighlight>

== مصادر ==

* [https://facebook.github.io/react-native/docs/toastandroid صفحة ToastAndroid في توثيق React Native الرسميّ]
[[تصنيف:ReactNative]]
[[تصنيف:React Native API]]