زرّ الويب يحصل على تنسيقات المرور بالمؤشّر (hover) وحلقات التركيز ومؤشّر اليد مجانًا. أما على الهاتف فلا hover ولا مؤشّر: هناك إبهام، عريض وغير دقيق ومتحرّك. والتعامل الجيد مع اللمس على الجوّال يتلخّص في ثلاثة أشياء: هدف كبير بما يكفي، واستجابة بصرية لحظة ملامسة الإصبع، وحقول إدخال تفتح لوحة المفاتيح المناسبة.
\nيغلّف Pressable أي محتوى ويُبلغ عن اللمسات. ويمكن أن يكون الـ prop المسمّى style دالة تستقبل { pressed }، فتستطيع تعتيم الزر أو تلوينه ما دام الإصبع عليه:
import { Pressable, Text } from 'react-native';\n\ntype Props = { label: string; onPress: () => void; disabled?: boolean };\n\nexport function PrimaryButton({ label, onPress, disabled = false }: Props) {\n return (\n <Pressable\n onPress={onPress}\n disabled={disabled}\n accessibilityRole=\"button\"\n accessibilityState={{ disabled }}\n style={({ pressed }) => ({\n backgroundColor: disabled ? '#9bb5a7' : '#2f6f4e',\n opacity: pressed ? 0.75 : 1,\n paddingVertical: 14,\n paddingHorizontal: 20,\n borderRadius: 12,\n alignItems: 'center',\n })}\n >\n <Text style={{ color: 'white', fontSize: 16, fontWeight: '600' }}>{label}</Text>\n </Pressable>\n );\n}تجعل accessibilityRole="button" قارئَي الشاشة VoiceOver وTalkBack يعلنانه زرًّا؛ ويصبح النص الذي بداخله هو تسميته. أما الأزرار التي ليس فيها إلا أيقونة، فأضف لها accessibilityLabel="Delete hike" لأنه لا يوجد نص يُقرأ.
سترى أيضًا Button وTouchableOpacity في الكود القديم. لا يمكن تنسيق Button بأكثر من لون، وعائلة Touchable* هي الواجهة الأقدم. استخدم Pressable، وابنِ component الزر الخاص بك مرة واحدة.
إرشادات Apple تحدّد حدًّا أدنى 44 في 44 نقطة؛ وتقول Material Design إن الحد 48 في 48 dp. أيقونة بحجم 24 نقطة مقبولة بصريًا، لكنها أصغر من أن تُصاب وأنت تمشي على درب. يوسّع hitSlop منطقة اللمس دون تغيير التخطيط:
<Pressable\n onPress={() => onDelete(hike.id)}\n hitSlop={10}\n accessibilityRole=\"button\"\n accessibilityLabel={`Delete ${hike.name}`}\n>\n <TrashIcon size={24} />\n</Pressable>يعطيك Pressable أيضًا onLongPress (يُطلَق افتراضيًا بعد نحو نصف ثانية)، وonPressIn / onPressOut للّحظتين اللتين يلامس فيهما الإصبع الشاشة ثم يرتفع عنها. يستخدم Trailhead الضغط المطوّل على بطاقة الرحلة لفتح لوحة إجراءات سريعة، وهو نمط يعرفه مستخدمو iOS وAndroid من شاشاتهم الرئيسية. استخدمه للاختصارات فقط: لا أحد يكتشف الضغط المطوّل وحده، فكل إجراء خلفه يجب أن يكون متاحًا بطريقة أخرى أيضًا.
على Android يمكنك إضافة android_ripple={{ color: '#00000022' }} لتأثير التموّج الخاص بالمنصّة؛ أما iOS فيتجاهل هذا الـ prop، فيبقى تنسيق pressed مهمًّا هناك.
يعمل TextInput مثل <input> مضبوط، مع اختلاف واحد في التسمية. استخدم onChangeText، التي تعطيك النص الجديد. أما onChange فتعطيك كائن حدث أصليًا بدلًا من ذلك.
import { useState } from 'react';\nimport { Text, TextInput, View } from 'react-native';\nimport { PrimaryButton } from './PrimaryButton';\nimport { parseDistanceKm } from '../lib/parseDistance';\n\nexport function QuickLog({ onSave }: { onSave: (km: number) => void }) {\n const [text, setText] = useState('');\n const km = parseDistanceKm(text);\n\n return (\n <View style={{ gap: 8 }}>\n <Text>Distance (km)</Text>\n <TextInput\n value={text}\n onChangeText={setText}\n accessibilityLabel=\"Distance (km)\"\n keyboardType=\"decimal-pad\"\n placeholder=\"8.4\"\n returnKeyType=\"done\"\n style={{ borderWidth: 1, borderColor: '#c9d3cc', borderRadius: 10, padding: 12, fontSize: 18 }}\n />\n <PrimaryButton label=\"Save\" disabled={km === null} onPress={() => km !== null && onSave(km)} />\n </View>\n );\n}لاحظ ما يُخزَّن في الـ state: النص الخام text، لا رقم. لو خزّنت Number(text) بدلًا منه، لتحوّلت كتابة “8.” فورًا إلى 8 واختفت النقطة تحت إبهام المستخدم، ولأعطاك مسح الحقل 0. احتفظ بما كتبه المستخدم بالضبط، واشتقّ القيمة المحلَّلة أثناء الـ render. الزر يقرأ القيمة المشتقّة ويبقى معطّلًا حتى تصبح صالحة، وهذه استجابة أوضح من رسالة خطأ تظهر في منتصف الكتابة.
الـ props التي تشكّل لوحة مفاتيح الجوّال تستحق أن تعرفها بأسمائها:
\n| الـ prop | \nماذا يفعل | \n
|---|---|
keyboardType | \ndecimal-pad، number-pad، email-address، phone-pad، url | \n
autoCapitalize | \nnone للبريد الإلكتروني وأسماء المستخدمين؛ والافتراضي يكبّر أول حرف في الجملة | \n
autoComplete / textContentType | \nتسمح لنظام التشغيل باقتراح عناوين البريد وكلمات المرور ورموز التحقّق المحفوظة | \n
returnKeyType | \nالتسمية على مفتاح الإدخال: next، done، search | \n
secureTextEntry | \nيُخفي الأحرف في كلمات المرور | \n
ضبط هذه الخصائص بشكل صحيح هو معظم ما يجعل النموذج يبدو أصليًا. حقل بريد إلكتروني يكبّر الحرف الأول، أو حقل رمز لا يقترح رمز التحقّق من الرسالة النصية التي وصلت للتوّ، يخبر المستخدمين أن التطبيق لم يُبنَ بعناية.
\n\nهذه هي الفكرة وراء parseDistanceKm: وحّد الصيغة أولًا (احذف المسافات، حوّل إلى أحرف صغيرة، أزل “km” اللاحقة، حوّل الفاصلة إلى نقطة)، ثم اقبل فقط رقمًا موجبًا عاديًا ضمن نطاق معقول.
function parseDistanceKm(text) {\n const cleaned = String(text).trim().toLowerCase().replace(/\\s*km$/, '').replace(',', '.');\n if (!/^\\d+(\\.\\d+)?$/.test(cleaned)) return null;\n const km = Number(cleaned);\n return km > 0 && km <= 200 ? km : null;\n}\n\nfor (const input of ['8.4', '8,4', ' 12 km', 'abc', '0', '1.2.3']) {\n console.log(JSON.stringify(input), '->', parseDistanceKm(input));\n}ولأنها دالة عادية لا تستورد شيئًا من React Native، يمكنك اختبارها في أجزاء من الثانية، وهذا ما ستفعله في القسم 5. إبقاء منطق كهذا خارج الـ components عادة تعوّض كلفتها على الجوّال، حيث يستغرق تشغيل التطبيق للتحقّق من حالة ما وقتًا أطول بكثير مما على الويب.
\nبهذا تكتمل الأدوات الأساسية. أما القسم 2 فعن جعل كل ذلك يبدو صحيحًا: التنسيق دون cascade، وflexbox بقيم افتراضية مختلفة، وشاشات بكل الأحجام.
\n","toc":[{"id":"sec-1","text":"Pressable: الخيار الافتراضي لكل ما يُنقَر","level":2},{"id":"sec-2","text":"أهداف اللمس وhitSlop","level":2},{"id":"sec-3","text":"TextInput: مضبوط، ونصّ دائمًا","level":2},{"id":"sec-4","text":"تحليل ما يكتبه الناس","level":2}],"takeaways":["Pressable هو الخيار الافتراضي لأي شيء قابل للنقر؛ ويمكن أن تكون الـ style الخاصة به دالة تستقبل { pressed } لتعطي استجابة بصرية فورية.","يجب ألا يقلّ هدف اللمس عن 44 في 44 نقطة؛ وhitSlop يوسّع منطقة اللمس دون تغيير التخطيط.","الـ TextInput المضبوط يستخدم value مع onChangeText، التي تستقبل النص مباشرة.","keyboardType يغيّر لوحة المفاتيح لا القيمة: TextInput يعطيك نصًّا دائمًا، فحلّله وتحقّق منه بنفسك."],"further":[{"title":"Pressable","url":"https://reactnative.dev/docs/pressable"},{"title":"TextInput","url":"https://reactnative.dev/docs/textinput"},{"title":"Handling Touches","url":"https://reactnative.dev/docs/handling-touches"}],"quiz":[{"q":"وضعت keyboardType="decimal-pad" على حقل المسافة في Trailhead. ما نوع القيمة التي تصل إلى onChangeText؟
يقول المستخدمون إن أيقونة سلّة المهملات الصغيرة في Trailhead صعبة الإصابة، لكن التصميم يجب أن يبقى 24 في 24 نقطة. ما أفضل إصلاح؟
","options":[{"text":"أضفhitSlop={10} إلى الـ Pressable لتكبر منطقة اللمس 10 نقاط من كل جانب.","why":"صحيح. تحتفظ الأيقونة بحجمها المرئي بينما تصل المنطقة القابلة للنقر إلى 44 في 44."},{"text":"غلّف الأيقونة بـ Pressable ثانٍ غير مرئي.","why":"هدفا لمس متداخلان يجعلان من غير الواضح أيهما يستقبل الضغطة، ويضيفان view إضافيًا بلا فائدة."},{"text":"انتقل إلى onLongPress ليكون أمام المستخدمين وقت أطول للتصويب.","why":"الضغط المطوّل يغيّر الإيماءة لا حجم الهدف. سيظل المستخدمون يخطئون الهدف، وسينتظرون أيضًا."}],"answer":0},{"q":"ما المشكلة في حقل الإدخال هذا؟
\nconst [name, setName] = useState('');\n<TextInput value={name} onChange={setName} />onChange وonChangeText اسمان لشيء واحد.","why":"ليسا كذلك. onChange يستقبل كائن حدث أصليًا، فتصبح name كائنًا."},{"text":"لا يمكن أن يكون TextInput مضبوطًا؛ بل يجب أن يدير قيمته بنفسه.","why":"الحقول المضبوطة هي النمط المعتاد في React Native، تمامًا كما على الويب."},{"text":"onChange يمرّر حدثًا لا النص، فتصبح name كائنًا؛ استخدم onChangeText={setName}.","why":"صحيح. onChangeText يعطيك النص الجديد مباشرة."}],"answer":2}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// Turn what a hiker types into whole minutes, or null if it isn't valid.\n// Accept: \"135\", \"2:15\", \"2h 15m\", \"2h15m\", \"1h\", \"45m\" (any case, extra spaces OK).\nfunction parseDurationMin(text) {\n return Number(text);\n}\n\nconsole.log(parseDurationMin('2h 15m'));\n"},"solution":{"js":"function parseDurationMin(text) {\n const s = String(text).trim().toLowerCase();\n let minutes = null;\n let m;\n if (/^\\d+$/.test(s)) {\n minutes = Number(s);\n } else if ((m = s.match(/^(\\d+):(\\d{2})$/))) {\n if (Number(m[2]) < 60) minutes = Number(m[1]) * 60 + Number(m[2]);\n } else if ((m = s.match(/^(?:(\\d+)\\s*h)?\\s*(?:(\\d+)\\s*m)?$/)) && (m[1] || m[2])) {\n minutes = Number(m[1] ?? 0) * 60 + Number(m[2] ?? 0);\n }\n return minutes !== null && minutes > 0 ? minutes : null;\n}\n\nconsole.log(parseDurationMin('2h 15m'));\n"},"checks":[{"id":"plain-minutes","test":"return typeof parseDurationMin === 'function' && parseDurationMin(\"135\") === 135 && parseDurationMin(\" 90 \") === 90;"},{"id":"clock-format","test":"return parseDurationMin(\"2:15\") === 135 && parseDurationMin(\"0:45\") === 45 && parseDurationMin(\"2:75\") === null;"},{"id":"hours-minutes","test":"return parseDurationMin(\"2h 15m\") === 135 && parseDurationMin(\"2h15m\") === 135 && parseDurationMin(\"1H 5M\") === 65;"},{"id":"single-unit","test":"return parseDurationMin(\"1h\") === 60 && parseDurationMin(\"45m\") === 45;"},{"id":"rejects-bad","test":"return parseDurationMin(\"\") === null && parseDurationMin(\"abc\") === null && parseDurationMin(\"0\") === null && parseDurationMin(\"h\") === null;"}],"title":"حلّل مدّة الرحلة","prompt":"في نموذج Trailhead حقل Duration مع keyboardType="default"، لأن المتنزّهين يكتبون المدّة بطرق مختلفة. اكتب الدالة parseDurationMin(text) بحيث تُرجع المدّة بالدقائق الكاملة، أو null حين لا يكون النص صالحًا.
اقبل هذه الأشكال (مع تجاهل حالة الأحرف والمسافات المحيطة):
\n"135""2:15" (يجب أن تكون الدقائق أقل من 60، لذا "2:75" تُرجع null)"2h 15m"، "2h15m"، "1h"، "45m"أرجع null للنص الفارغ، ولأي شيء آخر، وللصفر.
String(text).trim().toLowerCase().","تعامل مع كل شكل بتعبير نمطي (regular expression) خاص به وأرجع النتيجة مبكرًا، مثل /^(\\d+):(\\d{2})$/ لصيغة الساعة.","لصيغة h/m، يطابق /^(?:(\\d+)\\s*h)?\\s*(?:(\\d+)\\s*m)?$/ الجزأين اختياريًا؛ تأكّد أن مجموعة واحدة على الأقل طابقت فعلًا، وإلا تسلّل النص الفارغ."],"explanation":"توحّد الدالة صيغة النص، ثم تجرّب نمطًا واحدًا لكل شكل مقبول، وتحوّل كلًّا منها إلى دقائق. كل مسار لا يطابق يترك minutes بقيمة null، وحارس أخير يرفض الصفر. إبقاء هذا خارج الـ component يعني أن النموذج يسأل سؤالًا واحدًا فقط (parseDurationMin(text) !== null)، وأنك تستطيع كتابة unit tests لكل إدخال غريب دون تشغيل محاكٍ.