ToastAndroid

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

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`

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

ToastAndroid.TOP;

`BOTTOM`

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

ToastAndroid.BOTTOM;

`CENTER`

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

ToastAndroid.CENTER;

مصادر

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