Vibration في React Native

تُستخدم Vibration لتشغيل التّنبيه بالاهتزاز في الجهاز.

أمثلة

مثالٌ عن مكوّن دالة (Function Component)

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;

مثالٌ عن مكوّن صنف (Class Component)

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
`pattern`	مصفوفة عددية (Array of numbers)	لا	نماذج التنبيه بالاهتزاز على شكل مصفوفة عدديّة بالميلي ثانية	Android IOS
`repeat`	قيمة منطقية (boolean)	لا	تكرار نماذج التّنبيه بالاهتزاز حتى طلب ()cancel. القيمة الافتراضيّة false	Android IOS

`cancel()‎`

Vibration.cancel();

يطلب لإيقاف التّنبيه بالاهتزاز بعد استدعاء التابع vibrate()‎، مع تمكين التّكرار.

مصادر

صفحة Vaibration في توثيق React Native الرسميّ