الواجهة 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));

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

إليك أيضًا هذا المثال المتقدم (تجربة حية):

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;

ملاحظة: لا يعمل التّابع ()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 الرسميّ