ToastAndroid في React Native

تعرض الواجهة البرمجيّة (ToastAndroid API) في React Native وحدة ToastAndroid الخاصّة بمنصّات Android على شكل وحدة جافا سكريبت JS، وتُقدِّم التّابع (show(message, duration K، الذي يأخذ المعاملات التّالية:

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

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

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

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

import React from "react";
import { View, StyleSheet, ToastAndroid, Button } from "react-native";
import Constants from "expo-constants";

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: Constants.statusBarHeight,
    backgroundColor: "#888888",
    padding: 8
  }
});

export default App;

اختراق البرمجة الأمريّة (Imperative)

تصنَّف الواجهة البرمجية ToastAndroid على أنها واجهةٌ برمجيّةٌ أمرية، غير أنّه توجد طريقة لإظهار (expose) المكونات التّصريحية (declarative)، منها كما هو موضح في المثال التالي:

import React, { useState, useEffect } from "react";
import { View, StyleSheet, ToastAndroid, Button } from "react-native";
import Constants from "expo-constants";

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: Constants.statusBarHeight,
    backgroundColor: "#888888",
    padding: 8
  }
});

export default App;

التوابع

`show()‎`

static show(message, duration)

`showWithGravity()‎`

static showWithGravity(message, duration, gravity)

`showWithGravityAndOffset()‎`

static showWithGravityAndOffset(message, duration, gravity, xOffset, yOffset)

الخاصيّات

`SHORT`

تدلّ هذه الخاصية على مدة بقاء الإشعار المصغَّر على الشاشة.

ToastAndroid.SHORT;

`LONG`

تدلّ هذه الخاصية على مدة بقاء الإشعار المصغَّر على الشاشة.

ToastAndroid.LONG;

`TOP`

تدلّ الخاصية TOPعلى مكان توضُّع الإشعار المصغَّر على الشاشة.

ToastAndroid.TOP;

`BOTTOM`

تدلّ الخاصية BOTTOM على مكان توضُّع الإشعار المصغَّر على الشاشة.

ToastAndroid.BOTTOM;

`CENTER`

تدلّ CENTER على مكان توضُّع الإشعار المصغَّر على الشاشة.

ToastAndroid.CENTER;

مصادر

صفحة ToastAndroid في توثيق React Native الرسميّ