首頁 > web前端 > js教程 > 如何在 React Native 中建立居中的金額輸入字段

如何在 React Native 中建立居中的金額輸入字段

Patricia Arquette
發布: 2025-01-07 18:32:40
原創
906 人瀏覽過

用於輸入金額的乾淨、居中的輸入欄位是任何金融應用程式中很小但很重要的一部分。它增強了用戶體驗、提供清晰度並確保易用性。在本文中,我們將逐步在 React Native 中建立可重複使用的 CurrencySection 元件。

此元件簡單但功能強大,具有:

  • 輸入欄位的動態高度調整。
  • 自動格式化指定貨幣的金額。
  • 內嵌錯誤訊息以提供更好的使用者回饋。

讓我們深入了解細節!


貨幣部分的作用

CurrencySection 組件的設計目的是:

  1. 讓使用者以視覺上吸引人的居中格式輸入金額。
  2. 自動將金額格式化為指定貨幣。
  3. 提供自訂元素的彈性,例如貨幣符號、佔位符文字和錯誤訊息。

執行

這是CurrencySection元件的完整實作:

/* eslint-禁用react-native/no-inline-styles */
從 'react' 導入 React, {useCallback, useState};
進口 {
  鍵盤,
  NativeSyntheticEvent,
  平台,
  樣式表,
  文字輸入,
  文字輸入內容大小變更事件數據,
  文字輸入屬性,
  看法,
來自 'react-native';
進口 {
  格式金額貨幣,
  MAX_AMOUNT_LENGTH_CURRENCY_SECTION,
  修剪編號,
來自 '../../utils/functions';
從 '../../utils/helpers/colors' 導入顏色;
從 '../../utils/helpers/Reusables' 導入 {InlineError};
從 '../texts/appText' 導入 AppText;

介面CurrencySectionProps擴充TextInputProps {
  標題? :字串;
  金額? :字串;
  錯誤? :字串;
  onChangeAmount? :(金額:字串)=>空白;
  是否可編輯? :布林值;
  貨幣? :字串;
}

constCurrencySection: React.FC<currencysectionprops>; = ({
  title = '輸入金額',
  金額='',
  錯誤='',
  onChangeAmount,
  可編輯 = true,
  貨幣 = '₦',
  ...道具
}) => {
  const [高度,setHeight] = useState(42);

  常數 onChangeText = useCallback(
    (文字:字串)=> {
      onChangeAmount?.(trimNumber(text));
    },
    [onChangeAmount],
  );

  const onBlur = useCallback(() => {
    如果(金額){
      const formattedAmount = formatAmountInCurrency(
        數字(金額.replaceAll(',', '')),
      ).replaceAll(',', '');
      onChangeAmount?.(formattedAmount);
    }
  }, [金額, onChangeAmount]);

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

  返回 (
    




<hr>

<p><img src="https://img.php.cn/upload/article/000/000/000/173624596347120.jpg" alt="How to Build a Centered Input Field for Amounts in React Native"></p>
<h3>
  
  
  貨幣部分組件的亮點
</h3>

<ol>
<li><p><strong>動態高度調整</strong><br><br>
輸入欄位動態調整大小以符合其內容大小,確保簡潔且自適應的設計。  </p></li>
<li><p><strong>自動貨幣格式</strong><br><br>
formatAmountInCurrency 函數可確保金額格式正確,使其更易於閱讀。  </p></li>
<li><p><strong>可自訂且可重複使用</strong><br><br>
透過標題、貨幣符號和錯誤訊息的屬性,該元件足夠靈活,適合各種用例。  </p></li>
<li><p><strong>錯誤回饋</strong><br><br>
內嵌錯誤訊息可提供即時回饋,而不會中斷 UI 流程。  </p></li>
</ol>


<hr>

<h3>
  
  
  造型選擇
</h3>

<ul>
<li>
<strong>對齊</strong>:將輸入和貨幣符號居中,創造乾淨、平衡的佈局。
</li>
<li>
<strong>字體大小和粗細</strong>:貨幣和輸入欄位的粗體和大字體確保它們脫穎而出。
</li>
<li>
<strong>顏色</strong>:中性佔位符顏色和透明背景保持對內容的關注。
</li>
</ul>


<hr>

<h3>
  
  
  結論
</h3>

<p>這個CurrencySection 組件是對任何金融應用程式的簡單而有效的補充。它旨在處理核心輸入要求,同時保持 UI 的視覺吸引力和功能性。  </p>

<p>嘗試一下,自訂它以適合您的應用風格,讓您的用戶享受無縫體驗!  </p>

<p><em>請隨時在評論中分享您的想法或問題。 </em></p>


          

            
        </textinputcontentsizechangeeventdata></currencysectionprops>
登入後複製

以上是如何在 React Native 中建立居中的金額輸入字段的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板