React Native에서 금액에 대한 중앙 입력 필드를 작성하는 방법

금액을 입력하기 위한 깔끔하고 중앙에 위치한 입력 필드는 모든 금융 앱에서 작지만 중요한 부분입니다. 이는 사용자 경험을 향상시키고 명확성을 제공하며 사용 편의성을 보장합니다. 이 글에서는 React Native에서 재사용 가능한 CurrencySection 컴포넌트를 생성하는 방법을 살펴보겠습니다.

이 구성 요소는 간단하면서도 강력하며 다음과 같은 기능을 제공합니다.

• 입력 필드의 동적 높이 조정.
• 지정된 통화로 금액을 자동으로 포맷합니다.
• 더 나은 사용자 피드백을 위한 인라인 오류 메시지입니다.

자세한 내용을 살펴보겠습니다!

---

통화섹션이 하는 일

CurrencySection 구성 요소는 다음과 같이 설계되었습니다.

1. 사용자가 시각적으로 보기 좋은 중앙 형식으로 금액을 입력할 수 있습니다.
2. 지정된 통화로 금액 형식을 자동으로 지정합니다.
3. 통화 기호, 자리 표시자 텍스트, 오류 메시지 등의 요소를 맞춤설정할 수 있는 유연성을 제공합니다.

---

구현

CurrencySection 구성 요소의 전체 구현은 다음과 같습니다.

/* eslint-비활성화 반응 네이티브/인라인 없음 스타일 */
'react'에서 React, {useCallback, useState}를 가져옵니다.
수입 {
  건반,
  네이티브합성이벤트,
  플랫폼,
  스타일시트,
  텍스트 입력,
  TextInputContentSizeChangeEventData,
  TextInputProps,
  보다,
} '반응 네이티브'에서;
수입 {
  형식AmountInCurrency,
  MAX_AMOUNT_LENGTH_CURRENCY_SECTION,
  트림번호,
} '../../utils/functions'에서;
'../../utils/helpers/colors'에서 색상을 가져옵니다.
'../../utils/helpers/Reusables'에서 {InlineError}를 가져옵니다.
'../texts/appText'에서 AppText를 가져옵니다.

인터페이스 CurrentSectionProps는 TextInputProps를 확장합니다.
  제목?: 문자열;
  금액?: 문자열;
  오류?: 문자열;
  onChangeAmount?: (금액: 문자열) => 무효의;
  isEditable?: 부울;
  통화?: 문자열;
}

const 통화섹션: React.FC<currencysectionprops> = ({
  title = '금액을 입력하세요',
  금액 = '',
  오류 = '',
  onChangeAmount,
  isEditable = 사실,
  통화 = '₦',
  ...소품
}) => {
  const [높이, setHeight] = useState(42);

  const onChangeText = useCallback(
    (텍스트: 문자열) => {
      onChangeAmount?.(trimNumber(text));
    },
    [변경금액],
  );

  const onBlur = useCallback(() => {
    만약 (금액) {
      const formatdAmount = formatAmountInCurrency(
        숫자(amount.replaceAll(',', '')),
      ).replaceAll(',', '');
      onChangeAmount?.(formattedAmount);
    }
  }, [금액, onChangeAmount]);

  const handlerContentSizeChange = useCallback(
    (예: 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>이 통화 섹션 구성 요소는 모든 금융 앱에 간단하면서도 효과적인 추가 기능입니다. UI를 시각적으로 매력적이고 기능적으로 유지하면서 핵심 입력 요구 사항을 처리하도록 설계되었습니다.  </p>

<p>한 번 시도해 보고 앱 스타일에 맞게 맞춤설정하여 사용자가 원활한 경험을 즐길 수 있도록 하세요!  </p>

<p><em>댓글로 생각이나 질문을 자유롭게 공유해주세요.</em></p>


          

            
        </textinputcontentsizechangeeventdata></currencysectionprops>

위 내용은 React Native에서 금액에 대한 중앙 입력 필드를 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!