الفرق بين المراجعتين ل"ReactNative/vibration"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(أنشأ الصفحة ب'= Vibration = تُستخدم لتشغيل التّنبيه بالاهتزاز في الجهاز. == أمثلة == * مثالٌ عن مكوّن دالة (Function Compo...')
 
ط (مراجعة)
سطر 1: سطر 1:
= Vibration =
+
<noinclude>{{DISPLAYTITLE:Vibration في React Native}}</noinclude>
تُستخدم لتشغيل التّنبيه بالاهتزاز في الجهاز.
+
تُستخدم Vibration لتشغيل التّنبيه بالاهتزاز في الجهاز.
 
+
__toc__
 
== أمثلة ==
 
== أمثلة ==
  
سطر 179: سطر 179:
 
 
 
export default App;
 
export default App;
</syntaxhighlight><blockquote>تطلب تطبيقات Android الإذن <code>()android.permission.VIBRATE</code> عن طريق إضافة السّطر <code><uses-permission android:name="android.permission.VIBRATE"/‎></code> إلى الملف <code>AndroidManifest.xml</code>.</blockquote><blockquote>تُنفِّذ الواجهة البرمجيّة للتّنبيه بالاهتزاز (Vibration API) على منصّة iOS عن طريق طلب <code>AudioServicesPlaySystemSound(kSystemSoundID_Vibrate)"‎</code>".  </blockquote>
+
</syntaxhighlight><blockquote>تطلب تطبيقات Android الإذن <code>()android.permission.VIBRATE</code>، عن طريق إضافة السّطر <code><uses-permission android:name="android.permission.VIBRATE"/‎></code> إلى الملف <code>AndroidManifest.xml</code>.</blockquote><blockquote>تُنفِّذ الواجهة البرمجيّة للتّنبيه بالاهتزاز (Vibration API) على منصّة iOS، عن طريق طلب <code>AudioServicesPlaySystemSound(kSystemSoundID_Vibrate)"‎</code>".  </blockquote>
  
 
== التوابع ==
 
== التوابع ==
سطر 200: سطر 200:
 
!المنصة
 
!المنصة
 
|-
 
|-
|pattern
+
|<code>pattern</code>
 
|رقم
 
|رقم
number
+
(number)
 
|لا
 
|لا
 
|مدة التنبيه بالاهتزاز بالميلي ثانية. المدة الافتراضية 400 ميلي ثانية
 
|مدة التنبيه بالاهتزاز بالميلي ثانية. المدة الافتراضية 400 ميلي ثانية
 
|Android
 
|Android
 
|-
 
|-
|pattern
+
|<code>pattern</code>
 
|مصفوفة عددية
 
|مصفوفة عددية
Array of numbers
+
(Array of numbers)
 
|لا
 
|لا
 
|نماذج التنبيه بالاهتزاز على شكل مصفوفة عدديّة بالميلي ثانية
 
|نماذج التنبيه بالاهتزاز على شكل مصفوفة عدديّة بالميلي ثانية
سطر 215: سطر 215:
 
IOS
 
IOS
 
|-
 
|-
|repeat
+
|<code>repeat</code>
 
|قيمة منطقية
 
|قيمة منطقية
boolean
+
(boolean)
 
|لا
 
|لا
 
|تكرار نماذج التّنبيه بالاهتزاز حتى طلب ()cancel. القيمة الافتراضيّة false
 
|تكرار نماذج التّنبيه بالاهتزاز حتى طلب ()cancel. القيمة الافتراضيّة false
سطر 227: سطر 227:
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
Vibration.cancel();
 
Vibration.cancel();
</syntaxhighlight>يطلب لإيقاف التّنبيه بالاهتزاز بعد استدعاء التابع <code>vibrate()‎</code> مع تمكين التّكرار.
+
</syntaxhighlight>يطلب لإيقاف التّنبيه بالاهتزاز بعد استدعاء التابع <code>vibrate()‎</code>، مع تمكين التّكرار.
  
 
== مصادر ==
 
== مصادر ==
  
 
* [https://facebook.github.io/react-native/docs/vibration صفحة Vaibration في توثيق React Native الرسميّ]
 
* [https://facebook.github.io/react-native/docs/vibration صفحة Vaibration في توثيق React Native الرسميّ]
 +
[[تصنيف:ReactNative]]

مراجعة 07:51، 7 يناير 2021

تُستخدم 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، عن طريق إضافة السّطر <uses-permission android:name="android.permission.VIBRATE"/‎> إلى الملف AndroidManifest.xml.

تُنفِّذ الواجهة البرمجيّة للتّنبيه بالاهتزاز (Vibration API) على منصّة iOS، عن طريق طلب AudioServicesPlaySystemSound(kSystemSoundID_Vibrate)"‎".

التوابع

vibrate()‎

Vibration.vibrate(?pattern: number | Array<number>, ?repeat: boolean)

يشغّل التّنبيه بالاهتزاز لفترةٍ زمنيّةٍ محدّدةٍ.

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

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

المعاملات

الاسم النوع مطلوب الوصف المنصة
pattern رقم

(number)

لا مدة التنبيه بالاهتزاز بالميلي ثانية. المدة الافتراضية 400 ميلي ثانية Android
pattern مصفوفة عددية

(Array of numbers)

لا نماذج التنبيه بالاهتزاز على شكل مصفوفة عدديّة بالميلي ثانية Android

IOS

repeat قيمة منطقية

(boolean)

لا تكرار نماذج التّنبيه بالاهتزاز حتى طلب ()cancel. القيمة الافتراضيّة false Android

IOS

cancel()‎

Vibration.cancel();

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

مصادر