ReactNative/toastandroid
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;