عرض مصدر ReactNative/vibration

<noinclude>{{DISPLAYTITLE:الواجهة Vibration في React Native}}</noinclude>
تُستخدم <code>Vibration</code> لتشغيل التّنبيه بالاهتزاز في الجهاز.
__toc__
== أمثلة ==

* [https://snack.expo.dev/@hsoubwiki/vibration-function-component مثالٌ عن مكوّن دالة (Function Component)]
<syntaxhighlight lang="javascript">
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;
</syntaxhighlight>

* [https://snack.expo.dev/@hsoubwiki/vibration-class-component مثالٌ عن مكوّن صنف (Class Component)]
<syntaxhighlight lang="javascript">
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;
</syntaxhighlight>تطلب تطبيقات Android الإذن <code>()android.permission.VIBRATE</code>، عن طريق إضافة السّطر الموالي إلى الملف <code>AndroidManifest.xml</code>: <syntaxhighlight lang="javascript">
<uses-permission android:name="android.permission.VIBRATE"/‎>
</syntaxhighlight>تُنفِّذ الواجهة البرمجيّة للتّنبيه بالاهتزاز (Vibration API) على منصّة iOS، عن طريق طلب:  <syntaxhighlight lang="javascript">
AudioServicesPlaySystemSound(kSystemSoundID_Vibrate)
</syntaxhighlight>

== التوابع ==

=== <code>vibrate()‎</code> ===
<syntaxhighlight lang="javascript">
Vibration.vibrate(?pattern: number | Array<number>, ?repeat: boolean)
</syntaxhighlight>يشغّل التّنبيه بالاهتزاز لفترةٍ زمنيّةٍ محدّدةٍ.

'''في منصّة Android:''' المُدّة الافتراضيّة للتنبيه بالاهتزاز هي 400 ميلي ثانيةٍ، ويمكن تحديد مُدّةٍ زمنيّةٍ أخرى عن طريق تمريرها كقيمةٍ عدديّةٍ للمعامل <code>pattern</code>. عندما يكون المعامل <code>pattern</code> مصفوفةً فإنّ فهارسها الفرديّة تشير إلى المدّة الزمنيّة للتّنبيه بالاهتزاز، في حين تشير فهارسها الزوجيّة إلى الفاصل الزمنيّ بين تكراره.

'''في منصّة IOS:''' تكون المُدّة الزمنيّة للتّنبيه بالاهتزاز ثابتةً، وهي 400 ميلي ثانية، وتمثل المصفوفة <code>pattern</code> قيم الفاصل الزّمنيّ للتّنبيه بالاهتزاز لأنّ مدّته الزمنيّة ثابتةٌ.

يأخذ التّابع <code>vibrate()‎</code>، كلًا من الوسيط <code>pattern</code>، ومصفوفة أعداد تمثِّل المدة الزمنية بالميللي ثانية معًا، ويمكنك ضبط المعامل <code>repeat</code> إلى القيمة<code>true</code>، للتشغيل المتواصل لنمط التنبيه بالاهتزاز المعطى، حتى يتم استدعاء التابع‎‏‪‫‬ ‪<code>cancel()</code>.

==== المعاملات ====
{| class="wikitable"
!الاسم
!النوع
!مطلوب
!الوصف
!المنصة
|-
| rowspan="2" |<code>pattern</code>
|عدد (number)
|لا
|مدة التّنبيه بالاهتزاز بالميلي ثانية، والمدة الافتراضيّة 400 ميلي ثانية
|Android
|-
|مصفوفة عددية (Array of numbers)
|لا
|نماذج التّنبيه بالاهتزاز على شكل مصفوفة عدديّة بالميلي ثانية
|Android
IOS
|-
|<code>repeat</code>
|قيمة منطقية (boolean)
|لا
|تكرار نماذج التّنبيه بالاهتزاز حتى طلب <code>()cancel</code>. القيمة الافتراضيّة false
|Android
IOS
|}

=== <code>cancel()‎</code> ===
<syntaxhighlight lang="javascript">
Vibration.cancel();
</syntaxhighlight>يطلب لإيقاف التّنبيه بالاهتزاز بعد استدعاء التابع <code>vibrate()‎</code>، مع تمكين التّكرار.

== مصادر ==

* [https://facebook.github.io/react-native/docs/vibration صفحة Vaibration في توثيق React Native الرسميّ]
[[تصنيف:ReactNative]]
[[تصنيف:React Native API]]