عندما يتعلق الأمر بالتعامل مع إدارة التركيز في React Native لتطبيقات التلفزيون، قد يجد المطورون أنفسهم يمرون بخمس مراحل مألوفة (من الحزن):؟ ؟ ؟ ؟ ؟

تعد إدارة التركيز تحديًا فريدًا في تطوير تطبيقات التلفزيون، نظرًا للتجزئة عبر منصات التلفزيون التي أدت إلى مجموعة متنوعة من تقنيات إدارة التركيز. لقد اضطر المطورون إلى إنشاء واعتماد استراتيجيات متعددة لإدارة التركيز، وغالبًا ما يقومون بالتوفيق بين الحلول الخاصة بالمنصة جنبًا إلى جنب مع التجريدات عبر الأنظمة الأساسية. لا يتمثل التحدي المتمثل في التركيز في ضمان التعامل مع التركيز بشكل صحيح فحسب، بل في التعامل مع اختلافات النظام الأساسي. يتمتع Android TV وtvOS من Apple بمحركات تركيز أصلية مميزة يمكنك قراءة المزيد عنها في هذه المقالة التي كتبها زميلي @hellonehha.

في الأصل، كانت المستندات وواجهات برمجة التطبيقات الخاصة بالتلفزيون جزءًا من وثائق React Native الرئيسية. الآن، تم نقل معظم المحتوى الخاص بالتلفزيون إلى مشروع React-Native-TVOS.

رد الفعل الأصلي-tvos

"react-native": "npm:react-native-tvos@latest"

مشروع React-native-tvos عبارة عن حزمة مفتوحة المصدر توفر إضافات وملحقات لإطار عمل React Native الأساسي، مع التركيز بشكل خاص على دعم منصات Apple TV وAndroid TV. تتمحور معظم التغييرات في هذا المشروع حول التعامل مع التنقل القائم على التركيز على SmartTV باستخدام D-Pad في جهاز التحكم عن بعد. تتم صيانة المشروع بواسطة (المذهل!) دوغ لودر ويوصى به عادةً باعتباره الطريقة الأساسية للتعامل مع إدارة التركيز في تطبيقات React Native TV.

ومع ذلك، مثل العديد من المشاريع التي يديرها المجتمع، فقد تطور مشروع React-Native-TVOS بناءً على احتياجات المطورين، وهناك الآن طرق متعددة للتعامل مع التركيز. دعنا نستكشف المكونات والتحسينات الإضافية للمكونات الموجودة التي توفرها شركة React-Native-TVOS:

1. TVFocusGuideView

&&&]يوفر TVFocusGuideView الدعم لواجهة برمجة التطبيقات UIFocusGuide من Apple ويتم تنفيذه بنفس الطريقة مع Android TV، للمساعدة في ضمان إمكانية التنقل إلى عناصر التحكم القابلة للتركيز، حتى لو لم تكن متوافقة بشكل مباشر مع عناصر التحكم الأخرى - حسب رد الفعل الأصلي-TVOS.

على سبيل المثال، إليك شبكة مكونة من 10 مكونات قابلة للضغط معروضة داخل مكون TVFocusGuideView:

استيراد { TVFocusGuideView } من 'react-native'؛ const TVFocusGuideViewExample = () => { const [focusedItem, setFocusedItem] = useState(null); const renderGridItem = number => ( setFocusedItem(number)} onBlur={() => setFocusedItem(null)}> {number} قابل للضغط> ); يعود (

{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(num => renderGridItem(num))} > ); };

import { TVFocusGuideView } from 'react-native';

const TVFocusGuideViewExample = () => {
  const [focusedItem, setFocusedItem] = useState(null);

  const renderGridItem = number => (
     setFocusedItem(number)}
      onBlur={() => setFocusedItem(null)}>
      {number}
    
  );

  return (
    
      

      
        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(num => renderGridItem(num))}
      
    >
  );
};

يقبل TVFocusGuideView بعض الدعائم التي تساعدك على التعامل مع التركيز:

الوجهات الدعامة

import { TVFocusGuideView } from 'react-native';

const TVFocusGuideViewExample = () => {
  const [focusedItem, setFocusedItem] = useState(null);

  const renderGridItem = number => (
     setFocusedItem(number)}
      onBlur={() => setFocusedItem(null)}>
      {number}
    
  );

  return (
    
      

      
        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(num => renderGridItem(num))}
      
    >
  );
};

باستخدام TVFocusGuideView يمكنك تعيين مجموعة من المكونات للتسجيل كـ "وجهات" لـ TVFocusGuideView. لنلقِ نظرة على مثالنا:

يؤدي تعيين خاصية الوجهات لتكون مرجعًا للعنصر 8 (الوجهات={[item8Ref.current]}) إلى انتقال التركيز إلى العنصر 8 عندما ننتقل في البداية إلى TVFocusGuideView.

دعم trapFocus

import { TVFocusGuideView } from 'react-native';

const TVFocusGuideViewExample = () => {
  const [focusedItem, setFocusedItem] = useState(null);

  const renderGridItem = number => (
     setFocusedItem(number)}
      onBlur={() => setFocusedItem(null)}>
      {number}
    
  );

  return (
    
      

      
        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(num => renderGridItem(num))}
      
    >
  );
};

يضمن هذا الدعامة عدم هروب التركيز من المكون الأصلي للاتجاهات المحددة. تضمن هذه الدعامة عدم هروب التركيز من المكون الأصلي للاتجاهات المحددة. لنلقِ نظرة على مثالنا:

باستخدام الدعامة trapFocusLeft، لم يعد بإمكانك التنقل إلى اليسار خارج الحاوية

دعامة التركيز التلقائي

import { TVFocusGuideView } from 'react-native';

const TVFocusGuideViewExample = () => {
  const [focusedItem, setFocusedItem] = useState(null);

  const renderGridItem = number => (
     setFocusedItem(number)}
      onBlur={() => setFocusedItem(null)}>
      {number}
    
  );

  return (
    
      

      
        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(num => renderGridItem(num))}
      
    >
  );
};

عند ضبط التركيز التلقائي على صحيح، سيدير ​​TVFocusGuideView التركيز نيابةً عنك عن طريق إعادة توجيه التركيز إلى أول طفل يمكن التركيز عليه. كما أنه يتذكر آخر طفل تم التركيز عليه ويعيد توجيه التركيز إليه في الزيارات اللاحقة. إذا تم استخدام هذه الخاصية مع خاصية الوجهات، فستكون للمكون الذي تم تعيينه بواسطة خاصية الوجهات الأولوية. لنلقِ نظرة على مثالنا:

بدون هذه الدعامة، عندما انتقلنا من مكون الرأس إلى تركيز TVFocusGuideView، انتقلنا إلى أقرب مكون - العنصر 3 (وفقًا لمحرك التركيز المدمج القائم على القرب في Android)
باستخدام خاصية التركيز التلقائي يتم الانتقال إلى العنصر 1

2. ملموس

مع أجهزة التلفزيون التفاعلية الأصلية، تشتمل مكونات Touchable ( TouchableWithoutFeedback و TouchableHighlight و TouchableOpacity) على رمز إضافي لاكتشاف تغييرات التركيز وتصميم المكونات بشكل صحيح عند التركيز. كما يضمن أيضًا تشغيل الإجراءات المناسبة عندما يتفاعل المستخدم مع طرق العرض القابلة للمس باستخدام جهاز التحكم عن بعد الخاص بالتلفزيون.

على وجه التحديد، يتم تشغيل حدث onFocus عندما يكتسب العرض Touchable التركيز، ويتم تشغيل حدث onBlur عندما يفقد العرض التركيز. يمكّنك هذا من تطبيق نمط أو منطق فريد عندما يكون المكون في حالة التركيز التي لا تخرج من الصندوق مع React Native الأساسي.

بالإضافة إلى ذلك، تم تعديل طريقة onPress ليتم تشغيلها عندما يحدد المستخدم Touchable بالضغط على الزر "تحديد" الموجود على جهاز التحكم عن بعد الخاص بالتلفزيون (الزر الأوسط الموجود على جهاز التحكم عن بعد Apple TV أو الزر الأوسط الموجود على Android TV D-Pad ) ويتم تنفيذ الحدث onLongPress مرتين عند الضغط باستمرار على زر "تحديد" لمدة معينة.

3. قابل للضغط

مثل Touchable، تم تحسين المكون Pressable للسماح له بقبول دعائم onFocus وonBlur.

على غرار حالة "الضغط" التي يتم تشغيلها عندما يضغط المستخدم على المكون على شاشة تعمل باللمس، يقدم مكون React-Native-tvos Pressable حالة مركزة تصبح حقيقية عندما يتم تركيز المكون على شاشة التلفزيون.

إليك مثال عند استخدام المكونات القابلة للضغط والقابلة للمس من React Native الأساسية ولا تقبل/تنفذ خاصيتي onFocus وonBlur:

باستخدام نفس المكونات القابلة للضغط والقابلة للمس من أجهزة التلفاز التفاعلية الأصلية، يقبلون وينفذون دعائم onFocus وonBlur:

4. hasTVPreferredFocus support

تحتوي بعض مكونات React Native على خاصية hasTVPreferredFocus، والتي تساعدك على تحديد أولويات التركيز. إذا تم ضبطه على true، فسيفرض hasTVPreferredFocus التركيز على هذا العنصر. وفقًا لمستندات React Native، هذه هي المكونات الحالية التي تقبل الدعامة:

ومع ذلك، إذا كنت تستخدم React-Native-tvOS، فهناك الكثير من المكونات التي تقبل هذه الخاصية:

import { TVFocusGuideView } from 'react-native';

const TVFocusGuideViewExample = () => {
  const [focusedItem, setFocusedItem] = useState(null);

  const renderGridItem = number => (
     setFocusedItem(number)}
      onBlur={() => setFocusedItem(null)}>
      {number}
    
  );

  return (
    
      

      
        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(num => renderGridItem(num))}
      
    >
  );
};

لننظر إلى مثال:

يؤدي تعيين الخاصية hasTVPreferredFocus إلى true لـ Pressable 2 إلى التركيز على Pressable 2
يؤدي تغيير ذلك ليكون صحيحًا عندما نكون على Pressable 3 إلى انتقال التركيز إلى Pressable 3

5. دعامة nextFocusDirection

تقوم الدعامة nextFocusDirection بتعيين المكون التالي لتلقي التركيز عندما يتنقل المستخدم في الاتجاه المحدد مما يساعدك على التعامل مع التنقل بين التركيز. عند استخدام React-Native-tvos، يتم قبول هذه الخاصية من قبل نفس المكونات التي تقبل الخاصية hasTVPreferredFocus (View، TouchableHighlight، Pressable، TouchableOpacity، TextInput، TVFocusGuideView، TouchableNativeFeedback، Button). لننظر إلى مثال:

nextFocusDown={pressableRef3.current} nextFocusRight={pressableRef5.current}>

import { TVFocusGuideView } from 'react-native';

const TVFocusGuideViewExample = () => {
  const [focusedItem, setFocusedItem] = useState(null);

  const renderGridItem = number => (
     setFocusedItem(number)}
      onBlur={() => setFocusedItem(null)}>
      {number}
    
  );

  return (
    
      

      
        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(num => renderGridItem(num))}
      
    >
  );
};

يؤدي تعيين خاصية FocusDown التالية إلى Pressable 3 إلى انتقال التركيز إلى Pressable 3 عندما يتحرك التركيز لأسفل
يؤدي ضبط خاصية FocusRight التالية على Pressable 5 إلى انتقال التركيز إلى Pressable 5 عندما يتحرك التركيز إلى اليمين

خاتمة

عندما يتعلق الأمر بالتعامل مع إدارة التركيز، لا يوجد حل واحد يناسب الجميع لتطبيقات React Native TV. يعتمد النهج في النهاية على الاحتياجات والمتطلبات المحددة لمشروعك. في حين أن أجهزة رد الفعل الأصلية توفر تجريدات مفيدة عبر الأجهزة، فقد يتعين عليك اعتماد حلول خاصة بالنظام الأساسي للتعامل مع مشكلات التجزئة الشائعة عبر منصات SmartTV.

خذ الوقت الكافي لاستكشاف حلول إدارة التركيز المتنوعة هذه حتى تتمكن من تقديم تجربة سهلة للتعامل مع التركيز البؤري لمستخدميك، بغض النظر عن منصة SmartTV التي يستخدمونها.

الموارد ذات الصلة

https://dev.to/amazonappdev/tv-navigation-in-react-native-a-guide-to-using-tvfocusguideview-302i
https://medium.com/xite-engineering/revolutionizing-focus-management-in-tv-applications-with-react-native-10ba69bd90
https://reactnative.dev/docs/0.72/building-for-tv