react-native-graph

react-native-graph هو مكون مفتوح المصدر لـ React Native لرسم الرسوم البيانية الخطية. يصفه ملف README بأنه تنفيذ يعتمد على Skia تم إنشاؤه في Margelo واستُخدم في تطبيق Pink Panda Wallet لعرض العديد من الرسوم البيانية للرموز الرقمية. ينصب تركيزه الموثق على الرسوم البيانية السلسة للهاتف المحمول: يدرج ملف README رندرة cubic bezier، واستيفاء المسار الأصلي في Skia، والرسوم المتحركة (تصل إلى 120 إطارًا في الثانية وفقًا لـ README)، وإيماءة التمرير/المسح (pan/scrubbing)، والتوافق مع سجلات الأسعار على نمط محافظ العملات الرقمية. تُصدر الحزمة مكون LineGraph. الخصائص (props) المطلوبة هي points (مصفوفة من كائنات GraphPoint تحتوي على قيمة عددية وتاريخ Date) و color. كما يقبل ViewProps الخاصة بـ React Native على العرض الجذري. يقوم متغير boolean متحرك بالتبديل بين الرندرة المتحركة ورندرة ثابتة خفيفة الوزن، والتي يقترح ملف README استخدامها لعرض العديد من الرسوم البيانية في قائمة. يمكن لخاصية range الاختيارية تجاوز المحور x، أو المحور y، أو كليهما؛ وإلا يتم استنتاج المحاور من النقاط. يفتح الوضع المتحرك ميزات إضافية. تضيف gradientFillColors تعبئة متدرجة عمودية أسفل الخط. وتتحكم lineThickness في عرض الخط. وتفعل enablePanGesture تفاعل الضغط والمسح، مع استدعاءات (callbacks) لـ onGestureStart و onPointSelected و onGestureEnd؛ بينما تتحكم panGestureDelay في مدة الضغط المطلوبة قبل بدء المسح. يقوم SelectionDot برندرة موضع المسح ويمكن استبداله أو إخفاؤه باستخدام null. وتضبط horizontalPadding و verticalPadding مساحة الرسم. وتظهر enableIndicator و indicatorPulsating مؤشرًا عند النقطة الأخيرة. وتقوم TopAxisLabel و BottomAxisLabel برندرة عناصر React مخصصة فوق الرسم البياني وأسفله. وتؤدي enableFadeInMask إلى تلاشي بداية الخط تدريجيًا. تم توثيق بعض الخصائص على أنها مخصصة للوضع المتحرك فقط، بما في ذلك إيماءة التمرير، والتسميات، والمؤشر، والتعبئة المتدرجة، و SelectionDot. ويشير ملف README إلى أن selectionDotShadowColor غير مستخدم حاليًا وليس له تأثير بصري. يوثق ملف README خلفيتين للرندرة. Skia هي الافتراضية. ويمكن اختيار خلفية GPU canvas بديلة، وهي react-native-tgfx، في وقت البناء باستخدام EXPO_PUBLIC_RN_GRAPH_BACKEND=tgfx (أو RN_GRAPH_BACKEND في React Native المجرد مع إضافة Babel inline-environment-variables). يلزم تثبيت رندرة واحدة فقط؛ حيث يعامل Metro كليهما كاختياريين، وإذا تم طلب tgfx ولكن لم يتم تثبيته، فإن الرسم البياني يصدر تحذيرًا لمرة واحدة ويعود إلى Skia. يجب أن يستورد SelectionDot المخصص الأشكال من الرندرة النشطة. وتُصدر الحزمة GRAPH_BACKEND للتحقق من الرندرة التي استقر عليها البناء ('skia' أو 'tgfx'). يتطلب التثبيت react-native-reanimated و react-native-gesture-handler و @shopify/react-native-skia للخلفية الافتراضية، بالإضافة إلى react-native-graph نفسه. يتضمن ملف README مثالاً على استخدام LineGraph مع خطاف usePriceHistory وأمثلة لخصائص الرسوم المتحركة، وإيماءات التمرير، والنطاق، و SelectionDot مخصص. كما يربط بمثال SelectionDot مخصص في المستودع. المشروع برعاية Pink Panda ولديه مجتمع Discord تابع لـ Margelo. ويشكر ملف README كل من William Candillon و Christian Falch على المساعدة في React Native Skia.