عرض مصدر ReactNative/interactionmanager

<noinclude>{{DISPLAYTITLE:الواجهة InteractionManager في React Native}}</noinclude> 
تسمح الواجهة <code>InteractionManager</code> بجدولة الأعمال طويلة الأمد بعد انتهاء أيّ تفاعلٍ، أو حركةٍ، ممّا يسمح لمحركات [[JavaScript]] بالعمل بسلاسةٍ، ويمكن للتطبيقات جدولة مهامّها لتعمل بعد التفاعلات (interactions)، وذلك كما يلي:<syntaxhighlight lang="java">
InteractionManager.runAfterInteractions(() => {
  // ...مهمة متزامنة طويلة الأمد...
});
</syntaxhighlight>كما توجد خياراتُ جدولةٍ بديلةٌ:

* <code>‎‏‏()requestAnimationFrame</code>: للشّفرة البرمجية التي تحرّك الواجهة مع مرور الوقت.
* <code>()setImmediate/setTimeout</code>: لتشغيل الشفرة البرمجية لاحقًا، مع ملاحظة إمكانية تأخّر الحركات.
* <code>()runAfterInteractions</code>: لتشغيل الشفرة البرمجية لاحقًا، دون تأخير الحركات الفعّالة.

تَعتبر منظومة معالجة اللّمسات (touch handling system) التفاعل (interaction) هو لمسةٌ فعّالةٌ واحدةٌ، أو أكثر، وتقوم بتأخير استجابات <code>()runAfterInteractions</code> حتى انتهاء جميع اللّمسات، أو إلغائها.

يسمح <code>InteractionManager</code> كذلك للتّطبيقات بتسجيل الحركات، وذلك بإنشاء التفاعل <code>handle</code> عند بداية الحركة، وحذفه عند اكتمالها:<syntaxhighlight lang="javascript">
var handle = InteractionManager.createInteractionHandle();
// تشغيل الحركة... (`runAfterInteractions` جدولة المهام)
// فيما بعد, عند إتمام الحركة:
InteractionManager.clearInteractionHandle(handle);
// المهام المجدولة التي ستعمل بعد حذف جميع المعالجات
</syntaxhighlight>يأخذ التابع <code>()runAfterInteractions</code> دالة استجابةٍ صريحةٍ، أو الكائن <code>PromiseTask</code> مع التابع <code>gen</code> الذي يعيد وعدًا (Promise)، حيث يقبّل بشكلٍ تامٍّ (متضمنًا الاعتماديّات غير المتزامنة التي تجدوِل مزيداً من المهام عن طريق <code>()runAfterInteractions</code>، إذا زُوِّد بالكائن <code>PromiseTask</code>، وذلك قبل مباشرة المهمّة التالية التي قد تكون جُدوِلت مسبقًا.

تُنفَّذ المهام المجدولة مع بعضها على شكل حلقةٍ تكراريةٍ ضمن دُفعة <code>setImmediate</code> واحدةٍ؛ أمّا عند استدعاء <code>setDeadline</code> مع عددٍ موجبٍ، فيجدوَل تنفيذ المهام حتى الحدّ الأقصى فقط، وبتعابير JS، هو عبارة عن زمن تنفيذ حلقة الحدث من خلال <code>setTimeout</code>، ممّا يسمح للأحداث كاللمسات ببدء التّفاعلات، ويوقف تنفيذ المهام المجدولة، ويجعل التّطبيق أكثر استجابةً.
__toc__
== مثال ==
إليك هذا المثال الأساسي التالي ([https://snack.expo.dev/@hsoubwiki/interactionmanager-function-component-basic-example تجربة حية]):<syntaxhighlight lang="javascript">
import React, { useState, useEffect } from "react";
import {
  Alert,
  Animated,
  InteractionManager,
  Platform,
  StyleSheet,
  Text,
  View,
} from "react-native";

const instructions = Platform.select({
  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
  android:
    "Double tap R on your keyboard to reload,\n" +
    "Shake or press menu button for dev menu",
});

const useMount = func => useEffect(() => func(), []);

const useFadeIn = (duration = 5000) => {
  const [opacity] = useState(new Animated.Value(0));

  // Running the animation when the component is mounted
  useMount(() => {
    // Animated.timing() create a interaction handle by default, if you want to disabled that
    // behaviour you can set isInteraction to false to disabled that.
    Animated.timing(opacity, {
      toValue: 1,
      duration,
    }).start();
  });

  return opacity;
};

const Ball = ({ onShown }) => {
  const opacity = useFadeIn();

  // Running a method after the animation
  useMount(() => {
    const interactionPromise = InteractionManager.runAfterInteractions(() => onShown());
    return () => interactionPromise.cancel();
  });

  return <Animated.View style={[styles.ball, { opacity }]} />;
};

const App = () => {
  return (
    <View style={styles.container}>
      <Text>{instructions}</Text>
      <Ball onShown={() => Alert.alert("Animation is done")} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: "center", alignItems: "center" },
  ball: {
    width: 100,
    height: 100,
    backgroundColor: "salmon",
    borderRadius: 100,
  },
});

export default App;
</syntaxhighlight>إليك أيضًا هذا المثال المتقدم ([https://snack.expo.dev/@hsoubwiki/interactionmanager-function-component-advanced-example تجربة حية]):<syntaxhighlight lang="javascript">
import React, { useEffect } from "react";
import {
  Alert,
  Animated,
  InteractionManager,
  Platform,
  StyleSheet,
  Text,
  View,
} from "react-native";

const instructions = Platform.select({
  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
  android:
    "Double tap R on your keyboard to reload,\n" +
    "Shake or press menu button for dev menu",
});

const useMount = func => useEffect(() => func(), []);

// You can create a custom interaction/animation and add
// support for InteractionManager
const useCustomInteraction = (timeLocked = 2000) => {
  useMount(() => {
    const handle = InteractionManager.createInteractionHandle();

    setTimeout(
      () => InteractionManager.clearInteractionHandle(handle),
      timeLocked
    );

    return () => InteractionManager.clearInteractionHandle(handle);
  });
};

const Ball = ({ onInteractionIsDone }) => {
  useCustomInteraction();

  // Running a method after the interaction
  useMount(() => {
    InteractionManager.runAfterInteractions(() => onInteractionIsDone());
  });

  return <Animated.View style={[styles.ball]} />;
};

const App = () => {
  return (
    <View style={styles.container}>
      <Text>{instructions}</Text>
      <Ball onInteractionIsDone={() => Alert.alert("Interaction is done")} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: "center", alignItems: "center" },
  ball: {
    width: 100,
    height: 100,
    backgroundColor: "salmon",
    borderRadius: 100,
  },
});

export default App;
</syntaxhighlight>'''ملاحظة:''' لا يعمل التّابع <code>()InteractionManager.runAfterInteractions</code> كما ينبغي في الويب، إذ يُطلق آنيًّا دون انتظار انتهاء التفاعل.
== التوابع ==

=== <code>‎runAfterInteractions()‎</code> ===
<syntaxhighlight lang="javascript">
static runAfterInteractions(task)
</syntaxhighlight>يقوم هذا التابع بجدولة الدالة لتعمل بعد إتمام جميع التفاعلات، ويعيد وعداً (promise) قابلاً للإنهاء.

=== <code>‎createInteractionHandle()‎</code> ===
<syntaxhighlight lang="javascript">
static createInteractionHandle()
</syntaxhighlight>ينبّه التابع <code>()createInteractionHandle</code> المدير إلى بدء التفاعل.

=== <code>‎clearInteractionHandle()‎</code> ===
<syntaxhighlight lang="javascript">
static clearInteractionHandle(handle)
</syntaxhighlight>ينبّه هذا التابع المدير إلى اكتمال التفاعل.

=== <code>‎setDeadline()‎</code> ===
<syntaxhighlight lang="javascript">
static setDeadline(deadline)
</syntaxhighlight>يستخدم <code>setTimeout</code> مع عددٍ موجبٍ لجدولة أيّ مهمّةٍ حيث يصل زمن تنفيذ حلقة الحدث إلى قيمة <code>deadline</code>، وإلا فسينفذ افتراضيًّا جميع المهام، ضمن دُفعة <code>setImmediate</code> واحدةٍ.

== مصادر ==

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