InteractionManager في React Native

يسمح InteractionManager بجدولة الأعمال طويلة الأمد بعد انتهاء أيّ تفاعلٍ، أو حركةٍ، ممّا يسمح لمحركات Javascript بالعمل بسلاسةٍ، ويمكن للتطبيقات جدولة مهامّها لتعمل بعد التفاعلات (interactions)، وذلك كما يلي:

InteractionManager.runAfterInteractions(() => {
  // ...مهمة متزامنة طويلة الأمد...
});

كما توجد خياراتُ جدولةٍ بديلةٌ:

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

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

يسمح InteractionManager كذلك للتّطبيقات بتسجيل الحركات، وذلك بإنشاء التفاعل handle عند بداية الحركة، وحذفه عند اكتمالها:

var handle = InteractionManager.createInteractionHandle();
// تشغيل الحركة... (`runAfterInteractions` جدولة المهام)
// فيما بعد, عند إتمام الحركة:
InteractionManager.clearInteractionHandle(handle);
// المهام المجدولة التي ستعمل بعد حذف جميع المعالجات

يأخذ التابع ()runAfterInteractions دالة استجابةٍ صريحةٍ، أو الكائن PromiseTask مع التابع gen الذي يعيد وعدًا (Promise)، حيث يقبّل بشكلٍ تامٍّ (متضمناً الاعتماديّات غير المتزامنة التي تجدوِل مزيداً من المهام عن طريق ()runAfterInteractions، إذا زُوِّد بالكائن PromiseTask، وذلك قبل مباشرة المهمّة التالية التي قد تكون جُدوِلت مسبقاً.

تُنفَّذ المهام المجدولة مع بعضها على شكل حلقةٍ تكراريةٍ ضمن دُفعة setImmediate واحدةٍ؛ أمّا عند استدعاء setDeadline مع عددٍ موجبٍ، فيجدوَل تنفيذ المهام حتى الحدّ الأقصى فقط، وبتعابير JS، هو عبارة عن زمن تنفيذ حلقة الحدث من خلال setTimeout، ممّا يسمح للأحداث كاللمسات ببدء التّفاعلات، ويوقف تنفيذ المهام المجدولة، ويجعل التّطبيق أكثر استجابةً.

مثال

أساسيّ

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));

  // تشغيل الحركة بعد تثبيت المكون
  useMount(() => {
    // Animated.timing() ينشئ معالج التفاعل بشكل افتراضي
 // false مساوية  isInteraction ويلغى هذا السلوك بجعل قيمة 
    
    Animated.timing(opacity, {
      toValue: 1,
      duration,
    }).start();
  });

  return opacity;
};

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

  // تشغيل التابع بعد الحركة
  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;

متقدّم

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(), []);

// يمكنك إنشاء تفاعل أو حركة شخصية وتضيف دعم 
// InteractionManager
const useCustomInteraction = (timeLocked = 2000) => {
  useMount(() => {
    const handle = InteractionManager.createInteractionHandle();

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

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

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

  // تشغيل التابع بعد التفاعل
  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;

ملاحظة. لا يعمل التابع ()InteractionManager.runAfterInteractions كما ينبغي في الويب، إذ يُطلق آنيًّا دون انتظار انتهاء التفاعل.

التوابع

`()runAfterInteractions`

static runAfterInteractions(task)

يقوم هذا التابع بجدولة الدالة لتعمل بعد إتمام جميع التفاعلات، ويعيد وعداً (promise) قابلاً للإنهاء.

`()createInteractionHandle`

static createInteractionHandle()

ينبّه التابع ()createInteractionHandle المدير إلى بدء التفاعل.

`()clearInteractionHandle`

static clearInteractionHandle(handle)

ينبّه هذا التابع المدير إلى اكتمال التفاعل.

`()setDeadline`

static setDeadline(deadline)

يستخدم setTimeout مع عددٍ موجبٍ لجدولة أيّ مهمّةٍ حيث يصل زمن تنفيذ حلقة الحدث إلى قيمة deadline، وإلا سينفذ وبشكلٍ افتراضيٍّ جميع المهام، ضمن دُفعة setImmediate واحدةٍ.

مصادر

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