تكرار السؤال: …
الإجابة المختصرة
باستخدام الـ Refs لربط عناصر TextInput واستدعاء .focus() على الحقل التالي عند الضغط على زر الإدخال (onSubmitEditing) في لوحة المفاتيح مع تحديد returnKeyType="next".
الشرح
لتحسين تجربة إدخال المستخدم، نقوم بتعريف كائن ref لكل حقل. عند كتابة البريد والنقر على زر الانتقال في الكيبورد، نقوم برمجياً بنقل مؤشر الكتابة مباشرة لحقل كلمة المرور، مع ضبط نوع لوحة المفاتيح المناسب (keyboardType="email-address" أو "numeric") وتعطيل التصحيح التلقائي للحقول الحساسة.
مثال بالكود
function Form() {
const passwordRef = useRef<TextInput>(null);
return (
<View>
<TextInput
placeholder="البريد الإلكتروني"
returnKeyType="next"
keyboardType="email-address"
autoCapitalize="none"
onSubmitEditing={() => passwordRef.current?.focus()}
/>
<TextInput
ref={passwordRef}
placeholder="كلمة المرور"
secureTextEntry
returnKeyType="done"
/>
</View>
);
}أخطاء شائعة
- عدم تعطيل autoCorrect و autoCapitalize في حقول البريد الإلكتروني وكلمات المرور مما يربك المستخدم.