Cara Membina Medan Input Berpusat untuk Jumlah dalam React Native

Medan input yang bersih dan berpusat untuk memasukkan amaun ialah bahagian kecil tetapi penting dalam mana-mana apl kewangan. Ia meningkatkan pengalaman pengguna, memberikan kejelasan dan memastikan kemudahan penggunaan. Dalam artikel ini, kami akan membincangkan cara mencipta komponen CurrencySection yang boleh diguna semula dalam React Native.

Komponen ini ringkas tetapi berkuasa, menampilkan:

• Pelarasan ketinggian dinamik untuk medan input.
• Pemformatan automatik untuk jumlah dalam mata wang tertentu.
• Pemesejan ralat sebaris untuk maklum balas pengguna yang lebih baik.

Mari kita mendalami butirannya!

---

Perkara yang Dilakukan oleh Bahagian Mata Wang

Komponen CurrencySection direka untuk:

1. Benarkan pengguna memasukkan jumlah dalam format berpusat yang menarik secara visual.
2. Formatkan jumlah secara automatik ke dalam mata wang yang ditentukan.
3. Berikan fleksibiliti untuk menyesuaikan elemen seperti simbol mata wang, teks pemegang tempat dan mesej ralat.

---

Perlaksanaan

Berikut ialah pelaksanaan penuh komponen CurrencySection:

/* eslint-disable react-native/no-inline-styles */
import React, {useCallback, useState} daripada 'react';
import {
  papan kekunci,
  NativeSyntheticEvent,
  platform,
  Stylesheet,
  TextInput,
  TextInputContentSizeChangeEventData,
  TextInputProps,
  Lihat,
} daripada 'react-native';
import {
  formatAmountInCurrency,
  MAX_AMOUNT_LENGTH_CURRENCY_SECTION,
  trimNombor,
} daripada '../../utils/functions';
import warna daripada '../../utils/helpers/colors';
import {InlineError} daripada '../../utils/helpers/Reusables';
import AppText daripada '../texts/appText';

antara muka CurrencySectionProps memanjangkan TextInputProps {
  tajuk?: rentetan;
  jumlah?: string;
  ralat?: string;
  onChangeAmount?: (jumlah: rentetan) => kekosongan;
  isEditable?: boolean;
  mata wang?: string;
}

const Bahagian Mata Wang: React.FC<CurrencySectionProps> = ({
  tajuk = 'Masukkan jumlah',
  jumlah = '',
  ralat = '',
  onChangeAmount,
  isEditable = benar,
  mata wang = '₦',
  ... prop
}) => {
  const [ketinggian, setHeight] = useState(42);

  const onChangeText = useCallback(
    (teks: rentetan) => {
      onChangeAmount?.(trimNumber(teks));
    },
    [onChangeAmount],
  );

  const onBlur = useCallback(() => {
    jika (jumlah) {
      const formattedAmount = formatAmountInCurrency(
        Nombor(amount.replaceAll(',', '')),
      ).replaceAll(',', '');
      onChangeAmount?.(formattedAmount);
    }
  }, [jumlah, onChangeAmount]);

  const handleContentSizeChange = useCallback(
    (e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
      setHeight(e.nativeEvent.contentSize.height);
    },
    [],
  );

  kembali (
    <Lihat>




<hr>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173624596347120.jpg" class="lazy" alt="How to Build a Centered Input Field for Amounts in React Native"></p><h3>
  
  
  Sorotan Komponen Bahagian Mata Wang
</h3>

<ol>
<li><p><strong>Pelarasan Ketinggian Dinamik</strong><br><br>
Medan input diubah saiz secara dinamik agar sepadan dengan saiz kandungannya, memastikan reka bentuk yang bersih dan mudah suai.  </p></li>
<li><p><strong>Pemformatan Mata Wang Automatik</strong><br><br>
Fungsi formatAmountInCurrency memastikan jumlah diformatkan dengan sewajarnya, menjadikannya lebih mudah dibaca.  </p></li>
<li><p><strong>Boleh Disesuaikan dan Boleh Digunakan Semula</strong><br><br>
Dengan prop untuk tajuk, simbol mata wang dan mesej ralat, komponen ini cukup fleksibel untuk pelbagai kes penggunaan.  </p></li>
<li><p><strong>Maklum Balas Ralat</strong><br><br>
Mesej ralat sebaris memberikan maklum balas segera tanpa mengganggu aliran UI.  </p></li>
</ol>


<hr>

<h3>
  
  
  Pilihan Penggayaan
</h3>

• Penjajaran: Memusatkan input dan simbol mata wang menghasilkan reka letak yang bersih dan seimbang.
• Saiz dan Berat Fon: Fon tebal dan besar untuk mata wang dan medan input memastikan ia menonjol.
• Warna: Warna pemegang tempat neutral dan latar belakang telus mengekalkan tumpuan pada kandungan.

---

Kesimpulan

Komponen CurrencySection ini adalah tambahan yang mudah tetapi berkesan kepada mana-mana aplikasi kewangan. Ia direka bentuk untuk mengendalikan keperluan input teras sambil mengekalkan UI secara visual menarik dan berfungsi.

Cubalah, sesuaikan mengikut gaya apl anda dan biarkan pengguna anda menikmati pengalaman yang lancar!

Jangan ragu untuk berkongsi pendapat atau soalan anda dalam ulasan.

Atas ialah kandungan terperinci Cara Membina Medan Input Berpusat untuk Jumlah dalam React Native. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!