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

用於輸入金額的乾淨、居中的輸入欄位是任何金融應用程式中很小但很重要的一部分。它增強了用戶體驗、提供清晰度並確保易用性。在本文中，我們將逐步在 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="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173624596347120.jpg?x-oss-process=image/resize,p_40" class="lazy" 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中文網其他相關文章！