@actbase/react-daum-postcode 中文文档教程

Question

@actbase/react-daum-postcode

상세사용방법은한래URL을참고하세요。

https://github.com/daumPostcode/QnA
https://spi.maps.daum.net/postcode/guidessl

설치하기

npm install @actbase/react-daum-postcode

or

yarn add @actbase/react-daum-postcode

React-Native를 사용 시 추가적으로 설치해주세요.

우편번호찾는페이지자체는Webview를통해실행되도록되어있습니다。
react-native-webview 显示 설치해야 합니다。

npm install react-native-webview
npx pod-install

---

사용하기

import Postcode from '@actbase/react-daum-postcode';

const YourView = () => (
  <Postcode
    style={{ width: 320, height: 320 }}
    jsOptions={{ animation: true }}
    onSelected={data => alert(JSON.stringify(data))}
  />
);

팝업으로 사용할땐 아래와 같이 사용해도 됩니다.

import Postcode from '@actbase/react-daum-postcode';
...

const YourView = () => {
  const [isModal, setModal] = useState(false);
  return (
    <>
      <Modal isVisible={isModal}>
        <Postcode
          style={{ width: 320, height: 320 }}
          jsOptions={{ animation: true, hideMapBtn: true }}
          onSelected={data => {
            alert(JSON.stringify(data));
            setModal(false);
          }}
        />
      </Modal>
      <Button onClick={() => setModal(true)}>주소찾기</Button>
    </>
  );
}

---

속성

jsOptions?: JSOptions

다음우편번호찾기속성을넣습니다。

answer URL을참고해주세요.
https://spi.maps.daum.net/postcode/guidessl#attributes

onSelected: (data: OnCompleteParams) => void

다음우편번호찾기 결과 값을 수신합니다。

oncomplete의항목을참고해주세요。
https://spi.maps.daum.net/postcode/guidessl#attributes

style: ({width, height})

宽度、高度

Contacts

해당모듈은액트베이스(유)에서개발및관리를진행하고있습니다。
프로젝트 문의 혹은 제휴가필요한 경우 project@actbase.io로 연락주세요。

Changes

• 1.0.4
• 웹버전에서 width 500 해제
• 1.0.2
• 웹버전에서 onSelected 장애 처리
• 1.0.1
• 액트베이스(유) 오픈소스 기준에 맞춰서 수정
• 1.0.0
• 콘솔제거
• 0.9.8
• onClose 이벤트 제거
• 웹에서 가끔 하단에 툭 튀어나오는 장애 처리
• 0.9.6
• onClose 이벤트 추가
• 0.9.4
• 아싸리 그냥 FlexStyle속성을 다 밀어넣어버립시다..
• 0.9.3
• 속성에 flex 추가. Thanks @miraten
• 0.9.2
• RN 에서 검색 다음페이지 갈 경우 위로 스크롤 올려줌
• 지도보기 등 외부 링크를 누를경우 브라우저로 이동
• 0.9.0
• 첫 배포