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

تعرض الواجهة البرمجيّة (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, 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;

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

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;

التوابع

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 الرسميّ