React Native で金額の中央入力フィールドを構築する方法

金額を入力するためのすっきりとした中央の入力フィールドは、金融アプリにとって小さいながらも重要な部分です。ユーザーエクスペリエンスを向上させ、明確さを提供し、使いやすさを保証します。この記事では、React Native で再利用可能な CurrencySection コンポーネントを作成する方法を説明します。

このコンポーネントはシンプルでありながら強力で、次のような特徴があります:

• 入力フィールドの動的な高さ調整。
• 指定した通貨での金額の自動書式設定。
• ユーザーからのフィードバックを改善するためのインライン エラー メッセージ。

詳しく見ていきましょう!

---

CurrencySection の役割

CurrencySection コンポーネントは次のように設計されています:

1. ユーザーが視覚的に魅力的な中央揃えの形式で金額を入力できるようにします。
2. 金額を指定した通貨に自動的にフォーマットします。
3. 通貨記号、プレースホルダー テキスト、エラー メッセージなどの要素を柔軟にカスタマイズできます。

---

実装

CurrencySection コンポーネントの完全な実装は次のとおりです:

/* eslint-disable 反応ネイティブ/no-inline-styles */
'react' から React、{useCallback、useState} をインポートします。
輸入 {
  キーボード、
  ネイティブ合成イベント、
  プラットフォーム、
  スタイルシート、
  テキスト入力、
  TextInputContentSizeChangeEventData、
  TextInputProps、
  ビュー、
「反応ネイティブ」から;
輸入 {
  通貨の金額の形式、
  MAX_AMOUNT_LENGTH_CURRENCY_SECTION、
  トリム番号、
'../../utils/functions' から;
'../../utils/helpers/colors' から色をインポートします。
{InlineError} を '../../utils/helpers/Reusables' からインポートします。
「../texts/appText」から AppText をインポートします。

インターフェイス CurrencySectionProps extends TextInputProps {
  タイトル?: 文字列;
  金額?: 文字列;
  エラー?: 文字列;
  onChangeAmount?: (金額: 文字列) =>空所;
  isEditable?: ブール値;
  通貨?: 文字列;
}

const CurrencySection: React.FC<currencysectionprops> = ({
  title = '金額を入力',
  金額 = ''、
  エラー = ''、
  onChangeAmount、
  isEditable = true、
  通貨 = '₦'、
  ...小道具
}) => {
  const [高さ, setHeight] = useState(42);

  const onChangeText = useCallback(
    (テキスト: 文字列) => {
      onChangeAmount?.(trimNumber(text));
    }、
    [金額変更時]、
  );

  const onBlur = useCallback(() => {
    if (金額) {
      const formattedAmount = formatAmountInCurrency(
        Number(amount.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>
  
  
  CurrencySection コンポーネントのハイライト
</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 中国語 Web サイトの他の関連記事を参照してください。