TextInput — matn kiritish, klaviatura turlari

~15 daq · React Native · Asosiy komponentlar

Muammodan boshlaylik

Ro'yxatdan o'tish formasi: ism, telefon, email, parol. Vebda <input type="tel">, <input type="email"> — brauzer mos klaviaturani o'zi ko'rsatadi.

Mobil ilovada bu yanada muhim: telefon raqami uchun harfli klaviatura ochilsa, foydalanuvchi raqamlarni qidirib, qo'shimcha tugmani bosishi kerak. Har bir maydon uchun to'g'ri klaviatura — yaxshi mobil tajribaning asosi.

Asosiy ishlatish — controlled input

import { useState } from 'react';
import { TextInput, Text, View, StyleSheet } from 'react-native';

export default function Ism() {
  const [ism, setIsm] = useState('');

  return (
    <View style={{ padding: 16 }}>
      <TextInput
        style={styles.input}
        value={ism}
        onChangeText={setIsm}
        placeholder="Ismingiz"
        placeholderTextColor="#94a3b8"
      />
      <Text>Salom, {ism || 'mehmon'}!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  input: {
    borderWidth: 1,
    borderColor: '#cbd5e1',
    borderRadius: 10,
    paddingHorizontal: 14,
    paddingVertical: 12,
    fontSize: 16,
    backgroundColor: 'white',
  },
});

• value + onChangeText — React dagi controlled input
• onChangeText — to'g'ridan-to'g'ri matnni beradi (vebdagi e.target.value emas)
• TextInput standart holatda chegarasiz — stilni o'zingiz berasiz

[!TIP] fontSize: 16 dan kichik shrift iOS da ba'zan muammo tug'diradi va o'qish qiyin. Inputlar uchun 16 — yaxshi minimum.

Klaviatura turlari

<TextInput keyboardType="phone-pad" />        // telefon
<TextInput keyboardType="email-address" />    // @ va . tugmalari bilan
<TextInput keyboardType="numeric" />          // raqamlar
<TextInput keyboardType="decimal-pad" />      // raqamlar va vergul/nuqta
<TextInput keyboardType="url" />              // / va .com

Avtomatik to'ldirish va tuzatish

<TextInput
  keyboardType="email-address"
  autoCapitalize="none"          // birinchi harf katta bo'lmasin
  autoCorrect={false}            // avtotuzatish o'chirilsin
  autoComplete="email"           // Android: saqlangan emaillarni taklif qilish
  textContentType="emailAddress" // iOS: xuddi shu
/>

Email uchun autoCapitalize="none" — majburiy. Busiz telefon Aziz@mail.uz deb yozadi.

sms-otp / oneTimeCode — telefon SMS dagi kodni o'zi taklif qiladi. Foydalanuvchi uchun juda qulay.

Parol

const [korinsin, setKorinsin] = useState(false);

<View style={styles.qator}>
  <TextInput
    style={[styles.input, { flex: 1 }]}
    secureTextEntry={!korinsin}
    autoComplete="password"
    placeholder="Parol"
  />
  <Pressable onPress={() => setKorinsin(!korinsin)}>
    <Ionicons name={korinsin ? 'eye-off' : 'eye'} size={22} />
  </Pressable>
</View>

Ko'p qatorli matn

<TextInput
  multiline
  numberOfLines={4}
  textAlignVertical="top"         // Android: matn tepadan boshlansin
  style={[styles.input, { minHeight: 100 }]}
  placeholder="Izohingiz..."
  maxLength={500}
/>

Klaviaturadagi "Enter" tugmasi

const emailRef = useRef<TextInput>(null);
const parolRef = useRef<TextInput>(null);

<TextInput
  placeholder="Ism"
  returnKeyType="next"                          // tugmada "Keyingi"
  onSubmitEditing={() => emailRef.current?.focus()}
  submitBehavior="submit"
/>
<TextInput
  ref={emailRef}
  placeholder="Email"
  returnKeyType="next"
  onSubmitEditing={() => parolRef.current?.focus()}
/>
<TextInput
  ref={parolRef}
  placeholder="Parol"
  secureTextEntry
  returnKeyType="done"                          // "Tayyor"
  onSubmitEditing={yuborish}
/>

Foydalanuvchi forma bo'ylab klaviaturadan chiqmasdan o'tadi — formaning ekran bo'ylab "sakrashi" yo'q. Kichik detal, lekin farq katta.

Hodisalar va holat

const [fokus, setFokus] = useState(false);

<TextInput
  onFocus={() => setFokus(true)}
  onBlur={() => setFokus(false)}
  style={[styles.input, fokus && { borderColor: '#0284c7', borderWidth: 2 }]}
/>

fokus && {...} — shart false bo'lsa, massivda false qoladi va React Native uni e'tiborsiz qoldiradi.

editable={false}       // faqat o'qish uchun
selectTextOnFocus      // fokusda hammasini belgilash
clearButtonMode="while-editing"   // iOS: tozalash tugmasi

Qayta ishlatiladigan Input komponenti

Har bir formada bir xil stillarni takrorlamaslik uchun:

// components/Input.tsx
import { TextInput, TextInputProps, Text, View, StyleSheet } from 'react-native';

type Props = TextInputProps & { label: string; xato?: string };

export function Input({ label, xato, style, ...props }: Props) {
  return (
    <View style={{ gap: 6 }}>
      <Text style={styles.label}>{label}</Text>
      <TextInput
        style={[styles.input, xato && styles.xatoInput, style]}
        placeholderTextColor="#94a3b8"
        {...props}
      />
      {xato ? <Text style={styles.xato}>{xato}</Text> : null}
    </View>
  );
}

const styles = StyleSheet.create({
  label: { fontSize: 14, fontWeight: '600', color: '#334155' },
  input: { borderWidth: 1, borderColor: '#cbd5e1', borderRadius: 10, padding: 12, fontSize: 16 },
  xatoInput: { borderColor: '#dc2626' },
  xato: { color: '#dc2626', fontSize: 13 },
});

<Input label="Email" keyboardType="email-address" autoCapitalize="none" value={email} onChangeText={setEmail} xato={xatolar.email} />

{xato ? <Text/> : null} — {xato && <Text/>} emas. Agar xato bo'sh qator '' bo'lsa, && uni matn sifatida chizishga urinadi va "Text strings must be rendered within a Text component" xatosi chiqadi.

Formalar va validatsiya — 21-22 darslarda.

Nima uchun shunday?

Nima uchun onChangeText to'g'ridan-to'g'ri matnni beradi, vebdagidek hodisa ob'ektini emas?

Chunki mobil ilovada 99% holatda faqat matn kerak. Vebda onChange umumiy hodisa — u checkbox, select, fayl inputlari uchun ham ishlaydi, shuning uchun e.target.value dan olish kerak. React Native ning har bir komponenti o'z vazifasiga moslashgan hodisalarga ega: onChangeText — matn, onValueChange — Switch. Kamroq kod, kamroq xato.

Xulosa

Eslab qoling:

• value + onChangeText — controlled input; onChangeText matnni beradi
• keyboardType: phone-pad, email-address, numeric, decimal-pad
• Email: autoCapitalize="none", autoCorrect={false}
• autoComplete / textContentType — avto to'ldirish, sms-otp
• secureTextEntry — parol; multiline — ko'p qatorli
• returnKeyType + onSubmitEditing + ref.focus() — maydonlar orasida o'tish
• Qayta ishlatiladigan Input komponenti; shartli chizishda ? : null

Keyingi dars

10-dars: Pressable va tugmalar — bosish, uzoq bosish, feedback