如何在 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/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>
  
  
  货币部分组件的亮点
</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中文网其他相关文章！