الفرق بين المراجعتين ل"ReactNative/toastandroid"
رقية-بورية (نقاش | مساهمات) ط (مراجعة) |
جميل-بيلوني (نقاش | مساهمات) ط |
||
(3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
سطر 1: | سطر 1: | ||
− | <noinclude>{{DISPLAYTITLE:ToastAndroid في React Native}}</noinclude> | + | <noinclude>{{DISPLAYTITLE:الواجهة ToastAndroid في React Native}}</noinclude> |
− | تعرض الواجهة البرمجيّة (ToastAndroid API) في [[ReactNative|React Native]] وحدة | + | تعرض الواجهة البرمجيّة (ToastAndroid API) في [[ReactNative|React Native]] وحدة ToastAndroid الخاصّة بمنصّات Android على شكل وحدة جافا سكربت JS، كما تُقدِّم التّابع <code>(show(message, duration</code>، الذي يأخذ المعاملات التّالية: |
* <code>message</code>: الرّسالة التي ستعرض كإشعارٍ مصغَّرٍ (toast). | * <code>message</code>: الرّسالة التي ستعرض كإشعارٍ مصغَّرٍ (toast). | ||
سطر 11: | سطر 11: | ||
* <code>ToastAndroid.CENTER</code>: إظهار الإشعار المصغَّر منتصف الشّاشة. | * <code>ToastAndroid.CENTER</code>: إظهار الإشعار المصغَّر منتصف الشّاشة. | ||
− | يُضيف التّابع <code>showWithGravityAndOffset(message, duration, gravity, xOffset, yOffset)</code> إمكانيّة تحديد الإزاحة بالبكسل.<syntaxhighlight lang="javascript"> | + | |
+ | يُضيف التّابع <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 React from "react"; | ||
− | import { View, StyleSheet, ToastAndroid, Button } from "react-native"; | + | import { View, StyleSheet, ToastAndroid, Button, StatusBar } from "react-native"; |
− | + | ||
− | |||
const App = () => { | 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({ | const styles = StyleSheet.create({ | ||
− | + | container: { | |
− | + | flex: 1, | |
− | + | justifyContent: "center", | |
− | + | paddingTop: StatusBar.currentHeight, | |
− | + | backgroundColor: "#888888", | |
− | + | padding: 8 | |
} | } | ||
}); | }); | ||
− | + | ||
export default App; | export default App; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
__TOC__ | __TOC__ | ||
− | + | ||
− | تصنَّف الواجهة البرمجية ToastAndroid على أنّها واجهةٌ برمجيّةٌ أمرية، ومع ذلك توجد طريقة لإظهار (expose) المكونات التّصريحية (declarative)، منها كما هو موضّح في المثال التّالي:<syntaxhighlight lang="javascript"> | + | تصنَّف الواجهة البرمجية ToastAndroid على أنّها واجهةٌ برمجيّةٌ أمرية، ومع ذلك توجد طريقة لإظهار (expose) المكونات التّصريحية (declarative)، منها كما هو موضّح في المثال المتقدم التّالي ([https://snack.expo.dev/@hsoubwiki/advanced-toast-android-api-example تجربة حية]):<syntaxhighlight lang="javascript"> |
import React, { useState, useEffect } from "react"; | import React, { useState, useEffect } from "react"; | ||
− | import { View, StyleSheet, ToastAndroid, Button } from "react-native"; | + | import { View, StyleSheet, ToastAndroid, Button, StatusBar } from "react-native"; |
− | + | ||
− | |||
const Toast = ({ visible, message }) => { | const Toast = ({ visible, message }) => { | ||
− | + | if (visible) { | |
− | + | ToastAndroid.showWithGravityAndOffset( | |
− | + | message, | |
− | + | ToastAndroid.LONG, | |
− | + | ToastAndroid.BOTTOM, | |
− | + | 25, | |
− | + | 50 | |
− | + | ); | |
− | + | return null; | |
} | } | ||
− | + | return null; | |
}; | }; | ||
− | + | ||
const App = () => { | 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({ | const styles = StyleSheet.create({ | ||
− | + | container: { | |
− | + | flex: 1, | |
− | + | justifyContent: "center", | |
− | + | paddingTop: StatusBar.currentHeight, | |
− | + | backgroundColor: "#888888", | |
− | + | padding: 8 | |
} | } | ||
}); | }); | ||
− | + | ||
export default App; | export default App; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
سطر 134: | سطر 136: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | == | + | == الخاصيات == |
=== <code>SHORT</code> === | === <code>SHORT</code> === | ||
سطر 165: | سطر 167: | ||
* [https://facebook.github.io/react-native/docs/toastandroid صفحة ToastAndroid في توثيق React Native الرسميّ] | * [https://facebook.github.io/react-native/docs/toastandroid صفحة ToastAndroid في توثيق React Native الرسميّ] | ||
[[تصنيف:ReactNative]] | [[تصنيف:ReactNative]] | ||
+ | [[تصنيف:React Native API]] |
المراجعة الحالية بتاريخ 14:14، 9 أكتوبر 2021
تعرض الواجهة البرمجيّة (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;