الفرق بين المراجعتين ل"ReactNative/vibration"
رقية-بورية (نقاش | مساهمات) ط (تعديل على في تنسيقات الاقتباس لبعض الشيفرات) |
جميل-بيلوني (نقاش | مساهمات) ط |
||
(مراجعتان متوسطتان بواسطة مستخدمين اثنين آخرين غير معروضتين) | |||
سطر 1: | سطر 1: | ||
− | <noinclude>{{DISPLAYTITLE:Vibration في React Native}}</noinclude> | + | <noinclude>{{DISPLAYTITLE:الواجهة Vibration في React Native}}</noinclude> |
تُستخدم <code>Vibration</code> لتشغيل التّنبيه بالاهتزاز في الجهاز. | تُستخدم <code>Vibration</code> لتشغيل التّنبيه بالاهتزاز في الجهاز. | ||
__toc__ | __toc__ | ||
== أمثلة == | == أمثلة == | ||
− | * مثالٌ عن مكوّن دالة (Function Component) | + | * [https://snack.expo.dev/@hsoubwiki/vibration-function-component مثالٌ عن مكوّن دالة (Function Component)] |
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
import React from "react"; | import React from "react"; | ||
import { Button, Platform, Text, Vibration, View, SafeAreaView, StyleSheet } from "react-native"; | import { Button, Platform, Text, Vibration, View, SafeAreaView, StyleSheet } from "react-native"; | ||
− | + | ||
const Separator = () => { | const Separator = () => { | ||
− | + | return <View style={Platform.OS === "android" ? styles.separator : null} />; | |
} | } | ||
− | + | ||
const App = () => { | const App = () => { | ||
− | + | ||
− | + | const ONE_SECOND_IN_MS = 1000; | |
− | + | ||
− | + | const PATTERN = [ | |
− | + | 1 * ONE_SECOND_IN_MS, | |
− | + | 2 * ONE_SECOND_IN_MS, | |
− | + | 3 * ONE_SECOND_IN_MS | |
]; | ]; | ||
− | + | ||
− | + | const PATTERN_DESC = | |
− | + | Platform.OS === "android" | |
− | + | ? "wait 1s, vibrate 2s, wait 3s" | |
− | + | : "wait 1s, vibrate, wait 2s, vibrate, wait 3s"; | |
− | + | ||
− | + | return ( | |
− | + | <SafeAreaView style={styles.container}> | |
− | + | <Text style={[styles.header, styles.paragraph]}>Vibration API</Text> | |
− | + | <View> | |
− | + | <Button title="Vibrate once" onPress={() => Vibration.vibrate()} /> | |
− | + | </View> | |
− | + | <Separator /> | |
− | + | {Platform.OS == "android" | |
− | + | ? [ | |
− | + | <View> | |
− | + | <Button | |
− | + | title="Vibrate for 10 seconds" | |
− | + | onPress={() => Vibration.vibrate(10 * ONE_SECOND_IN_MS)} | |
− | + | /> | |
− | + | </View>, | |
− | + | <Separator /> | |
− | + | ] | |
− | + | : null} | |
− | + | <Text style={styles.paragraph}>Pattern: {PATTERN_DESC}</Text> | |
− | + | <Button | |
− | + | title="Vibrate with pattern" | |
− | + | onPress={() => Vibration.vibrate(PATTERN)} | |
− | + | /> | |
− | + | <Separator /> | |
− | + | <Button | |
− | + | title="Vibrate with pattern until cancelled" | |
− | + | onPress={() => Vibration.vibrate(PATTERN, true)} | |
− | + | /> | |
− | + | <Separator /> | |
− | + | <Button | |
− | + | title="Stop vibration pattern" | |
− | + | onPress={() => Vibration.cancel()} | |
− | + | color="#FF0000" | |
− | + | /> | |
− | + | </SafeAreaView> | |
); | ); | ||
} | } | ||
− | + | ||
const styles = StyleSheet.create({ | const styles = StyleSheet.create({ | ||
− | + | container: { | |
− | + | flex: 1, | |
− | + | justifyContent: "center", | |
− | + | paddingTop: 44, | |
− | + | padding: 8 | |
}, | }, | ||
− | + | header: { | |
− | + | fontSize: 18, | |
− | + | fontWeight: "bold", | |
− | + | textAlign: "center" | |
}, | }, | ||
− | + | paragraph: { | |
− | + | margin: 24, | |
− | + | textAlign: "center" | |
}, | }, | ||
− | + | separator: { | |
− | + | marginVertical: 8, | |
− | + | borderBottomColor: "#737373", | |
− | + | borderBottomWidth: StyleSheet.hairlineWidth | |
} | } | ||
}); | }); | ||
− | + | ||
export default App; | export default App; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | * مثالٌ عن مكوّن صنف (Class Component) | + | * [https://snack.expo.dev/@hsoubwiki/vibration-class-component مثالٌ عن مكوّن صنف (Class Component)] |
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
import React, { Component } from "react"; | import React, { Component } from "react"; | ||
import { Button, Platform, Text, Vibration, View, SafeAreaView, StyleSheet } from "react-native"; | import { Button, Platform, Text, Vibration, View, SafeAreaView, StyleSheet } from "react-native"; | ||
− | + | ||
const Separator = () => { | const Separator = () => { | ||
− | + | return <View style={Platform.OS === "android" ? styles.separator : null} />; | |
} | } | ||
− | + | ||
class App extends Component { | class App extends Component { | ||
− | + | render() { | |
− | + | const ONE_SECOND_IN_MS = 1000; | |
− | + | ||
− | + | const PATTERN = [ | |
− | + | 1 * ONE_SECOND_IN_MS, | |
− | + | 2 * ONE_SECOND_IN_MS, | |
− | + | 3 * ONE_SECOND_IN_MS | |
− | + | ]; | |
− | + | ||
− | + | const PATTERN_DESC = | |
− | + | Platform.OS === "android" | |
− | + | ? "wait 1s, vibrate 2s, wait 3s" | |
− | + | : "wait 1s, vibrate, wait 2s, vibrate, wait 3s"; | |
− | + | ||
− | + | return ( | |
− | + | <SafeAreaView style={styles.container}> | |
− | + | <Text style={[styles.header, styles.paragraph]}>Vibration API</Text> | |
− | + | <View> | |
− | + | <Button title="Vibrate once" onPress={() => Vibration.vibrate()} /> | |
− | + | </View> | |
− | + | <Separator /> | |
− | + | {Platform.OS == "android" | |
− | + | ? [ | |
− | + | <View> | |
− | + | <Button | |
− | + | title="Vibrate for 10 seconds" | |
− | + | onPress={() => Vibration.vibrate(10 * ONE_SECOND_IN_MS)} | |
− | + | /> | |
− | + | </View>, | |
− | + | <Separator /> | |
− | + | ] | |
− | + | : null} | |
− | + | <Text style={styles.paragraph}>Pattern: {PATTERN_DESC}</Text> | |
− | + | <Button | |
− | + | title="Vibrate with pattern" | |
− | + | onPress={() => Vibration.vibrate(PATTERN)} | |
− | + | /> | |
− | + | <Separator /> | |
− | + | <Button | |
− | + | title="Vibrate with pattern until cancelled" | |
− | + | onPress={() => Vibration.vibrate(PATTERN, true)} | |
− | + | /> | |
− | + | <Separator /> | |
− | + | <Button | |
− | + | title="Stop vibration pattern" | |
− | + | onPress={() => Vibration.cancel()} | |
− | + | color="#FF0000" | |
− | + | /> | |
− | + | </SafeAreaView> | |
− | + | ); | |
} | } | ||
} | } | ||
− | + | ||
const styles = StyleSheet.create({ | const styles = StyleSheet.create({ | ||
− | + | container: { | |
− | + | flex: 1, | |
− | + | justifyContent: "center", | |
− | + | paddingTop: 44, | |
− | + | padding: 8 | |
}, | }, | ||
− | + | header: { | |
− | + | fontSize: 18, | |
− | + | fontWeight: "bold", | |
− | + | textAlign: "center" | |
}, | }, | ||
− | + | paragraph: { | |
− | + | margin: 24, | |
− | + | textAlign: "center" | |
}, | }, | ||
− | + | separator: { | |
− | + | marginVertical: 8, | |
− | + | borderBottomColor: "#737373", | |
− | + | borderBottomWidth: StyleSheet.hairlineWidth | |
} | } | ||
}); | }); | ||
− | + | ||
export default App; | export default App; | ||
− | </syntaxhighlight>تطلب تطبيقات Android الإذن <code>()android.permission.VIBRATE</code>، عن طريق إضافة السّطر الموالي إلى الملف <code>AndroidManifest.xml</code>: <syntaxhighlight> | + | </syntaxhighlight>تطلب تطبيقات Android الإذن <code>()android.permission.VIBRATE</code>، عن طريق إضافة السّطر الموالي إلى الملف <code>AndroidManifest.xml</code>: <syntaxhighlight lang="javascript"> |
<uses-permission android:name="android.permission.VIBRATE"/> | <uses-permission android:name="android.permission.VIBRATE"/> | ||
− | </syntaxhighlight>تُنفِّذ الواجهة البرمجيّة للتّنبيه بالاهتزاز (Vibration API) على منصّة iOS، عن طريق طلب: <syntaxhighlight> | + | </syntaxhighlight>تُنفِّذ الواجهة البرمجيّة للتّنبيه بالاهتزاز (Vibration API) على منصّة iOS، عن طريق طلب: <syntaxhighlight lang="javascript"> |
AudioServicesPlaySystemSound(kSystemSoundID_Vibrate) | AudioServicesPlaySystemSound(kSystemSoundID_Vibrate) | ||
</syntaxhighlight> | </syntaxhighlight> | ||
سطر 206: | سطر 206: | ||
!المنصة | !المنصة | ||
|- | |- | ||
− | |<code>pattern</code> | + | | rowspan="2" |<code>pattern</code> |
|عدد (number) | |عدد (number) | ||
|لا | |لا | ||
سطر 212: | سطر 212: | ||
|Android | |Android | ||
|- | |- | ||
− | |||
|مصفوفة عددية (Array of numbers) | |مصفوفة عددية (Array of numbers) | ||
|لا | |لا | ||
سطر 236: | سطر 235: | ||
* [https://facebook.github.io/react-native/docs/vibration صفحة Vaibration في توثيق React Native الرسميّ] | * [https://facebook.github.io/react-native/docs/vibration صفحة Vaibration في توثيق React Native الرسميّ] | ||
[[تصنيف:ReactNative]] | [[تصنيف:ReactNative]] | ||
+ | [[تصنيف:React Native API]] |
المراجعة الحالية بتاريخ 14:13، 9 أكتوبر 2021
تُستخدم Vibration
لتشغيل التّنبيه بالاهتزاز في الجهاز.
أمثلة
import React from "react";
import { Button, Platform, Text, Vibration, View, SafeAreaView, StyleSheet } from "react-native";
const Separator = () => {
return <View style={Platform.OS === "android" ? styles.separator : null} />;
}
const App = () => {
const ONE_SECOND_IN_MS = 1000;
const PATTERN = [
1 * ONE_SECOND_IN_MS,
2 * ONE_SECOND_IN_MS,
3 * ONE_SECOND_IN_MS
];
const PATTERN_DESC =
Platform.OS === "android"
? "wait 1s, vibrate 2s, wait 3s"
: "wait 1s, vibrate, wait 2s, vibrate, wait 3s";
return (
<SafeAreaView style={styles.container}>
<Text style={[styles.header, styles.paragraph]}>Vibration API</Text>
<View>
<Button title="Vibrate once" onPress={() => Vibration.vibrate()} />
</View>
<Separator />
{Platform.OS == "android"
? [
<View>
<Button
title="Vibrate for 10 seconds"
onPress={() => Vibration.vibrate(10 * ONE_SECOND_IN_MS)}
/>
</View>,
<Separator />
]
: null}
<Text style={styles.paragraph}>Pattern: {PATTERN_DESC}</Text>
<Button
title="Vibrate with pattern"
onPress={() => Vibration.vibrate(PATTERN)}
/>
<Separator />
<Button
title="Vibrate with pattern until cancelled"
onPress={() => Vibration.vibrate(PATTERN, true)}
/>
<Separator />
<Button
title="Stop vibration pattern"
onPress={() => Vibration.cancel()}
color="#FF0000"
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
paddingTop: 44,
padding: 8
},
header: {
fontSize: 18,
fontWeight: "bold",
textAlign: "center"
},
paragraph: {
margin: 24,
textAlign: "center"
},
separator: {
marginVertical: 8,
borderBottomColor: "#737373",
borderBottomWidth: StyleSheet.hairlineWidth
}
});
export default App;
import React, { Component } from "react";
import { Button, Platform, Text, Vibration, View, SafeAreaView, StyleSheet } from "react-native";
const Separator = () => {
return <View style={Platform.OS === "android" ? styles.separator : null} />;
}
class App extends Component {
render() {
const ONE_SECOND_IN_MS = 1000;
const PATTERN = [
1 * ONE_SECOND_IN_MS,
2 * ONE_SECOND_IN_MS,
3 * ONE_SECOND_IN_MS
];
const PATTERN_DESC =
Platform.OS === "android"
? "wait 1s, vibrate 2s, wait 3s"
: "wait 1s, vibrate, wait 2s, vibrate, wait 3s";
return (
<SafeAreaView style={styles.container}>
<Text style={[styles.header, styles.paragraph]}>Vibration API</Text>
<View>
<Button title="Vibrate once" onPress={() => Vibration.vibrate()} />
</View>
<Separator />
{Platform.OS == "android"
? [
<View>
<Button
title="Vibrate for 10 seconds"
onPress={() => Vibration.vibrate(10 * ONE_SECOND_IN_MS)}
/>
</View>,
<Separator />
]
: null}
<Text style={styles.paragraph}>Pattern: {PATTERN_DESC}</Text>
<Button
title="Vibrate with pattern"
onPress={() => Vibration.vibrate(PATTERN)}
/>
<Separator />
<Button
title="Vibrate with pattern until cancelled"
onPress={() => Vibration.vibrate(PATTERN, true)}
/>
<Separator />
<Button
title="Stop vibration pattern"
onPress={() => Vibration.cancel()}
color="#FF0000"
/>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
paddingTop: 44,
padding: 8
},
header: {
fontSize: 18,
fontWeight: "bold",
textAlign: "center"
},
paragraph: {
margin: 24,
textAlign: "center"
},
separator: {
marginVertical: 8,
borderBottomColor: "#737373",
borderBottomWidth: StyleSheet.hairlineWidth
}
});
export default App;
تطلب تطبيقات Android الإذن ()android.permission.VIBRATE
، عن طريق إضافة السّطر الموالي إلى الملف AndroidManifest.xml
:
<uses-permission android:name="android.permission.VIBRATE"/>
تُنفِّذ الواجهة البرمجيّة للتّنبيه بالاهتزاز (Vibration API) على منصّة iOS، عن طريق طلب:
AudioServicesPlaySystemSound(kSystemSoundID_Vibrate)
التوابع
vibrate()
Vibration.vibrate(?pattern: number | Array<number>, ?repeat: boolean)
يشغّل التّنبيه بالاهتزاز لفترةٍ زمنيّةٍ محدّدةٍ.
في منصّة Android: المُدّة الافتراضيّة للتنبيه بالاهتزاز هي 400 ميلي ثانيةٍ، ويمكن تحديد مُدّةٍ زمنيّةٍ أخرى عن طريق تمريرها كقيمةٍ عدديّةٍ للمعامل pattern
. عندما يكون المعامل pattern
مصفوفةً فإنّ فهارسها الفرديّة تشير إلى المدّة الزمنيّة للتّنبيه بالاهتزاز، في حين تشير فهارسها الزوجيّة إلى الفاصل الزمنيّ بين تكراره.
في منصّة IOS: تكون المُدّة الزمنيّة للتّنبيه بالاهتزاز ثابتةً، وهي 400 ميلي ثانية، وتمثل المصفوفة pattern
قيم الفاصل الزّمنيّ للتّنبيه بالاهتزاز لأنّ مدّته الزمنيّة ثابتةٌ.
يأخذ التّابع vibrate()
، كلًا من الوسيط pattern
، ومصفوفة أعداد تمثِّل المدة الزمنية بالميللي ثانية معًا، ويمكنك ضبط المعامل repeat
إلى القيمةtrue
، للتشغيل المتواصل لنمط التنبيه بالاهتزاز المعطى، حتى يتم استدعاء التابع cancel()
.
المعاملات
الاسم | النوع | مطلوب | الوصف | المنصة |
---|---|---|---|---|
pattern
|
عدد (number) | لا | مدة التّنبيه بالاهتزاز بالميلي ثانية، والمدة الافتراضيّة 400 ميلي ثانية | Android |
مصفوفة عددية (Array of numbers) | لا | نماذج التّنبيه بالاهتزاز على شكل مصفوفة عدديّة بالميلي ثانية | Android
IOS | |
repeat
|
قيمة منطقية (boolean) | لا | تكرار نماذج التّنبيه بالاهتزاز حتى طلب ()cancel . القيمة الافتراضيّة false
|
Android
IOS |
cancel()
Vibration.cancel();
يطلب لإيقاف التّنبيه بالاهتزاز بعد استدعاء التابع vibrate()
، مع تمكين التّكرار.