react native international phone number 다운로드 -React react native international phone number 소스 코드 다운로드

기본 국제 전화 번호 입력에 반응합니다

특징

iOS, Android (크로스 플랫폼), 엑스포 및 웹과 함께 작동합니다.
? UI와의 맞춤형 LIB;
? 선택된 국가에 따른 전화 입력 마스크;
? comp 기능 및 클래스 구성 요소 지원;
? 22 개 언어 지원.

시도해보십시오

데모

내용 목록

오래된 버전
설치
추가 구성
- 기본 CLI에 반응합니다
- 엑스포
- 편물
기본 사용
- 클래스 구성 요소와 함께
- 기능 구성 요소로
- TypeScript와 함께
중간 사용
- TypeScript + useref
고급 사용
- React-Hook-Form + TypeScript + 기본 전화 번호 값
lib 사용자 정의
- 다크 모드
- 맞춤형 리브 스타일
- 커스텀 캐럿
- 사용자 정의 자리 소유자/메시지
- 맞춤형 모달 높이
- 국가 모달 장애 모드
- 전화 입력 비활성화 모드
- 사용자 정의 장애인 모드 스타일
- 기본 언어를 변경하십시오
- 맞춤형 전화 마스크
- 사용자 정의 기본 플래그/국가
- 기본 전화 번호 값
- 모달 내부의 일부 국가 만 보여줍니다
- 모달 내부의 일부 국가를 제외하십시오
- Modal 내부의 국가 상단에 인기있는 국가를 보여줍니다.
- 오른쪽에서 왼쪽 입력
- 코드를 호출 한 후 0을 허용하지 마십시오
lib 소품
lib 기능
지원되는 언어
기여
특허

오래된 버전

버전 0.7.x
버전 0.6.x
버전 0.5.x
버전 0.4.x

설치

$ npm i --save react-native-international-phone-number

또는

$ yarn add react-native-international-phone-number

추가 구성

React Native CLI 사용 :

다음과 같은 React-Native 프로젝트의 루트에서 react-native.config.js 파일을 만듭니다.

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: [
    ' ./node_modules/react-native-international-phone-number/lib/assets/fonts ' ,
  ],
} ;

그런 다음 글꼴을 기본 프로젝트에 다음과 같이 연결하십시오.

npx react-native-asset

엑스포 사용 :

Expo-Fonts 설치 : npx expo install expo-font ;
expo-font 초기화하십시오.

  import { useFonts } from ' expo-font ' ;

  ...

  useFonts({
    ' TwemojiMozilla ' : require( ' ./node_modules/react-native-international-phone-number/lib/assets/fonts/TwemojiMozilla.woff2 ' ),
  }) ;

  ...

관찰 : 새로운 글꼴을 추가 한 후 프로젝트를 다시 컴파일해야합니다.

웹 사용 :

app.json 파일을 다음과 같이 변경하십시오.

  ...

  " web " : {
    ...
    " output " : " single " ,
    ...
  },
  ...

기본 사용

클래스 구성 요소 :

 import React from 'react' ;
import { View , Text } from 'react-native' ;
import PhoneInput from 'react-native-international-phone-number' ;

export class App extends React . Component {
  constructor ( props ) {
    super ( props )
    this . state = {
      selectedCountry : null ,
      inputValue : ''
    }
  }

  function handleSelectedCountry ( country ) {
    this . setState ( {
      selectedCountry : country
    } )
  }

  function handleInputValue ( phoneNumber ) {
    this . setState ( {
      inputValue : phoneNumber
    } )
  }

  render ( ) {
    return (
      < View style = { { width : '100%' , flex : 1 , padding : 24 } } >
        < PhoneInput
          value = { this . state . inputValue }
          onChangePhoneNumber = { this . handleInputValue }
          selectedCountry = { this . state . selectedCountry }
          onChangeSelectedCountry = { this . handleSelectedCountry }
        />
        < View style = { { marginTop : 10 } } >
          < Text >
            Country: { ' ' }
            { ` ${ this . state . selectedCountry ?. name ?. en } ( ${ this . state . selectedCountry ?. cca2 } )` }
          </ Text >
          < Text >
            Phone Number: { ` ${ this . state . selectedCountry ?. callingCode } ${ this . state . inputValue } ` }
          </ Text >
        </ View >
      </ View >
    ) ;
  }
}

기능 구성 요소 :

 import React , { useState } from 'react' ;
import { View , Text } from 'react-native' ;
import PhoneInput from 'react-native-international-phone-number' ;

export default function App ( ) {
  const [ selectedCountry , setSelectedCountry ] = useState ( null ) ;
  const [ inputValue , setInputValue ] = useState ( '' ) ;

  function handleInputValue ( phoneNumber ) {
    setInputValue ( phoneNumber ) ;
  }

  function handleSelectedCountry ( country ) {
    setSelectedCountry ( country ) ;
  }

  return (
    < View style = { { width : '100%' , flex : 1 , padding : 24 } } >
      < PhoneInput
        value = { inputValue }
        onChangePhoneNumber = { handleInputValue }
        selectedCountry = { selectedCountry }
        onChangeSelectedCountry = { handleSelectedCountry }
      />
      < View style = { { marginTop : 10 } } >
        < Text >
          Country: { ' ' }
          { ` ${ selectedCountry ?. name ?. en } ( ${ selectedCountry ?. cca2 } )` }
        </ Text >
        < Text >
          Phone Number: { ' ' }
          { ` ${ selectedCountry ?. callingCode } ${ inputValue } ` }
        </ Text >
      </ View >
    </ View >
  ) ;
}

TypeScript

 import React , { useState } from 'react' ;
import { View , Text } from 'react-native' ;
import PhoneInput , {
  ICountry ,
} from 'react-native-international-phone-number' ;

export default function App ( ) {
  const [ selectedCountry , setSelectedCountry ] =
    useState < null | ICountry > ( null ) ;
  const [ inputValue , setInputValue ] = useState < string > ( '' ) ;

  function handleInputValue ( phoneNumber : string ) {
    setInputValue ( phoneNumber ) ;
  }

  function handleSelectedCountry ( country : ICountry ) {
    setSelectedCountry ( country ) ;
  }

  return (
    < View style = { { width : '100%' , flex : 1 , padding : 24 } } >
      < PhoneInput
        value = { inputValue }
        onChangePhoneNumber = { handleInputValue }
        selectedCountry = { selectedCountry }
        onChangeSelectedCountry = { handleSelectedCountry }
      />
      < View style = { { marginTop : 10 } } >
        < Text >
          Country: { ' ' }
          { ` ${ selectedCountry ?. name ?. en } ( ${ selectedCountry ?. cca2 } )` }
        </ Text >
        < Text >
          Phone Number: { ' ' }
          { ` ${ selectedCountry ?. callingCode } ${ inputValue } ` }
        </ Text >
      </ View >
    </ View >
  ) ;
}

중간 사용

TypeScript + useref

 import React , { useRef } from 'react' ;
import { View , Text } from 'react-native' ;
import PhoneInput , {
  ICountry ,
  IPhoneInputRef ,
} from 'react-native-international-phone-number' ;

export default function App ( ) {
  const phoneInputRef = useRef < IPhoneInputRef > ( null ) ;

  function onSubmitRef ( ) {
    Alert . alert (
      'Intermediate Result' ,
      ` ${ phoneInputRef . current ?. selectedCountry ?. callingCode } ${ phoneInputRef . current ?. value } `
    ) ;
  }

  return (
    < View style = { { width : '100%' , flex : 1 , padding : 24 } } >
      < PhoneInput ref = { phoneInputRef } />
      < TouchableOpacity
        style = { {
          width : '100%' ,
          paddingVertical : 12 ,
          backgroundColor : '#2196F3' ,
          borderRadius : 4 ,
          marginTop : 10 ,
        } }
        onPress = { onSubmit }
      >
        < Text
          style = { {
            color : '#F3F3F3' ,
            textAlign : 'center' ,
            fontSize : 16 ,
            fontWeight : 'bold' ,
          } }
        >
          Submit
        </ Text >
      </ TouchableOpacity >
    </ View >
  ) ;
}

관찰 : Usestate Hook와 결합 된 Useref 후크를 사용하여 전화기 및 선택된 계산 값을 관리하지 마십시오. 대신, 그중 하나만 사용하도록 선택하십시오 (useref 또는 usestate).

고급 사용

React-Hook-Form + TypeScript + 기본 전화 번호 값

 import React , { useState , useEffect } from 'react' ;
import { View , Text , TouchableOpacity , Alert } from 'react-native' ;
import PhoneInput , {
  ICountry ,
} from 'react-native-international-phone-number' ;
import { Controller , FieldValues } from 'react-hook-form' ;

interface FormProps extends FieldValues {
  phoneNumber : string ;
}

export default function App ( ) {
  const [ selectedCountry , setSelectedCountry ] = useState <
    undefined | ICountry
  > ( undefined ) ;

  function handleSelectedCountry ( country : ICountry ) {
    setSelectedCountry ( country ) ;
  }

  function onSubmit ( form : FormProps ) {
    Alert . alert (
      'Advanced Result' ,
      ` ${ selectedCountry ?. callingCode } ${ form . phoneNumber } `
    ) ;
  }

  return (
    < View style = { { width : '100%' , flex : 1 , padding : 24 } } >
      < Controller
        name = "phoneNumber"
        control = { control }
        render = { ( { field : { onChange , value } } ) => (
          < PhoneInput
            defaultValue = "+12505550199"
            value = { value }
            onChangePhoneNumber = { onChange }
            selectedCountry = { selectedCountry }
            onChangeSelectedCountry = { handleSelectedCountry }
          />
        ) }
      />
      < TouchableOpacity
        style = { {
          width : '100%' ,
          paddingVertical : 12 ,
          backgroundColor : '#2196F3' ,
          borderRadius : 4 ,
        } }
        onPress = { handleSubmit ( onSubmit ) }
      >
        < Text
          style = { {
            color : '#F3F3F3' ,
            textAlign : 'center' ,
            fontSize : 16 ,
            fontWeight : 'bold' ,
          } }
        >
          Submit
        </ Text >
      </ TouchableOpacity >
    </ View >
  ) ;
}

관찰 :
다음 형식으로 기본값을 사용해야합니다. +(country callling code)(area code)(number phone)
LIB에는 제공된 defaultValue 의 플래그와 마스크를 설정하는 메커니즘이 있습니다. 그러나 제공된 defaultValue 국제 표준과 일치하지 않으면 input mask of the defaultValue "BR"로 설정됩니다 (기본값이 위에서 언급 한 형식인지 확인하십시오).

lib 사용자 정의

맞춤형 리브 스타일

다크 모드 :

  ...
  < PhoneInput
    . . .
    theme = "dark"
  / >
  ...

맞춤형 리브 스타일 :

  ...
  < PhoneInput
    . . .
    phoneInputStyles = { {
      container : {
        backgroundColor : '#575757' ,
        borderWidth : 1 ,
        borderStyle : 'solid' ,
        borderColor : '#F3F3F3' ,
      } ,
      flagContainer : {
        borderTopLeftRadius : 7 ,
        borderBottomLeftRadius : 7 ,
        backgroundColor : '#808080' ,
        justifyContent : 'center' ,
      } ,
      flag : { } ,
      caret : {
        color : '#F3F3F3' ,
        fontSize : 16 ,
      } ,
      divider : {
        backgroundColor : '#F3F3F3' ,
      }
      callingCode : {
        fontSize : 16 ,
        fontWeight : 'bold' ,
        color : '#F3F3F3' ,
      } ,
      input : {
        color : '#F3F3F3' ,
      } ,
    } }
    modalStyles = { {
      modal : {
        backgroundColor : '#333333' ,
        borderWidth : 1 ,
      } ,
      backdrop : { } ,
      divider : {
        backgroundColor : 'transparent' ,
      } ,
      countriesList : { } ,
      searchInput : {
        borderRadius : 8 ,
        borderWidth : 1 ,
        borderColor : '#F3F3F3' ,
        color : '#F3F3F3' ,
        backgroundColor : '#333333' ,
        paddingHorizontal : 12 ,
        height : 46 ,
      } ,
      countryButton : {
        borderWidth : 1 ,
        borderColor : '#F3F3F3' ,
        backgroundColor : '#666666' ,
        marginVertical : 4 ,
        paddingVertical : 0 ,
      } ,
      noCountryText : { } ,
      noCountryContainer : { } ,
      flag : {
        color : '#FFFFFF' ,
        fontSize : 20 ,
      } ,
      callingCode : {
        color : '#F3F3F3' ,
      } ,
      countryName : {
        color : '#F3F3F3' ,
      } ,
    } }
  />
  . . .

커스텀 케어 :

  ...
  < PhoneInput
    . . .
    customCaret = { < Icon name = "chevron-down" size = { 30 } color = "#000000" /> }  // react-native-vector-icons
  />
  . . .

사용자 정의 자리 소유자/메시지 :

  ...
  < PhoneInput
    . . .
    placeholder = "Custom Phone Input Placeholder"
    modalSearchInputPlaceholder = "Custom Modal Search Input Placeholder"
    modalNotFoundCountryMessage = "Custom Modal Not Found Country Message"
  / >
  ...

맞춤형 모달 높이 :

  ...
  < PhoneInput
    . . .
    modalHeight = "80%"
  / >
  ...

국가 모달 장애인 모드 :

  ...
  < PhoneInput
    . . .
    modalDisabled
  />
  . . .

전화 입력 비활성화 모드 :

  ...
  < PhoneInput
    . . .
    disabled
  />
  . . .

사용자 정의 장애인 모드 스타일 :

  const [ isDisabled , setIsDisabled ] = useState < boolean > ( true )
  . . .
  < PhoneInput
    . . .
    containerStyle = { isDisabled ? { backgroundColor : 'yellow' } : { } }
    disabled = { isDisabled }
  / >
  ...

기본 언어 변경 :

  ...
  < PhoneInput
    . . .
    language = "pt"
  / >
  ...

맞춤형 전화 마스크 :

  ...
  < PhoneInput
    . . .
    customMask = { [ '#### ####' , '##### ####' ] }
  />
  . . .

사용자 정의 기본 플래그/국가 :

  ...
  < PhoneInput
    . . .
    defaultCountry = "CA"
  / >
  ...

기본 전화 번호 값 :

  ...
  < PhoneInput
    . . .
    defaultValue = "+12505550199"
  / >
  ...

관찰 :
E164 형식으로 기본값을 사용해야합니다 : +(country callling code)(area code)(number phone)
LIB에는 제공된 defaultValue 의 플래그와 마스크를 설정하는 메커니즘이 있습니다. 그러나 제공된 defaultValue 국제 표준과 일치하지 않으면 input mask of the defaultValue "BR"로 설정됩니다 (기본값이 위에서 언급 한 형식인지 확인하십시오).

Modal 내부의 일부 국가 만 보여줍니다.

  ...
  < PhoneInput
    . . .
    showOnly = { [ 'BR' , 'PT' , 'CA' , 'US' ] }
  />
  . . .

Modal 내부의 일부 국가를 제외합니다.

  ...
  < PhoneInput
    . . .
    excludedCountries = { [ 'BR' , 'PT' , 'CA' , 'US' ] }
  />
  . . .

Modal 내부의 국가 상단에 인기있는 국가를 보여줍니다.

  ...
  < PhoneInput
    . . .
    popularCountriess = { [ 'BR' , 'PT' , 'CA' , 'US' ] }
    popularCountriesSectionTitle = 'Suggested'
    restOfCountriesSectionTitle = 'All'
  />
  . . .

오른쪽에서 왼쪽 입력 :

  import { I18nManager } from "react-native" ;

  ...
  < PhoneInput
    . . .
    rtl = { I18nManager . isRTL }
  />
  . . .

코드를 호출 한 후 0을 허용하지 마십시오.

  ...
  < PhoneInput
    . . .
    allowZeroAfterCallingCode = { false }
  />
  . . .

구성 요소 소품 (PhoneInputProps)

language?: ilanguage;
customMask?: 문자열 [];
defaultValue?: 문자열;
value?: 문자열;
onChangePhoneNumber?: (PhoneNumber : String) => void;
defaultCountry?: IcountryCCA2;
selectedCountry?: Icountry;
onChangeSelectedCountry?: (국가 : Icountry) => void;
showOnly?: iCountryCCA2 [];
excludedCountries?: IcountryCCA2 [];
popularCountries?: iCountryCCA2 [];
popularCountriesSectionTitle?: String;
restOfCountriesSectionTitle?: String;
rtl?: 부울;
disabled?: 부울;
modalDisabled?: 부울;
modalHeight?: 숫자 | 끈;
theme?: Itheme;
phoneInputStyles?: iPhoneInputStyles;
modalStyles?: Imodalstyles;
modalSearchInputPlaceholder?: 문자열;
modalSearchInputPlaceholderTextColor?: String;
modalSearchInputSelectionColor?: String;
modalNotFoundCountryMessage?: 문자열;
customCaret?: ReactNode;
ref?: ref <iPhoneInputRef>;
allowZeroAfterCallingCode?: 부울

기능

getAllCountries: () => iCountry [];
getCountriesByCallingCode: (CallingCode : String) => ICOUNTRY [] | 한정되지 않은;
getCountryByCca2: (cca2 : string) => Icountry | 한정되지 않은;
getCountriesByName: (이름 : 문자열, 언어 : ilanguage) => iCountry [] | 한정되지 않은;
getCountryByPhoneNumber: (PhoneNumber : String) => Icountry | 한정되지 않은;

? 지원되는 언어?

  "name" : {
    "bg" : "Bulgarian" ,
    "by" : "Belarusian" ,
    "cn" : "Chinese" ,
    "cz" : "Czech" ,
    "de" : "German" ,
    "ee" : "Estonian" ,
    "el" : "Greek" ,
    "en" : "English" ,
    "es" : "Espanol" ,
    "fr" : "French" ,
    "he" : "Hebrew" ,
    "it" : "Italian" ,
    "jp" : "Japanese" ,
    "nl" : "Dutch" ,
    "pl" : "Polish" ,
    "pt" : "Portuguese" ,
    "ro" : "Romanian" ,
    "ru" : "Russian" ,
    "ua" : "Ukrainian" ,
    "zh" : "Chinese (Simplified)" ,
    "ar" : "Arabic" ,
    "tr" : "Turkish"
  } ,

기여

이 저장소를 포크 또는 복제하십시오

  $ git clone https://github.com/AstrOOnauta/react-native-international-phone-number.git

수리, 업데이트 및 즐기?
이 저장소에 새 PR을 만듭니다

특허

ISC

들러 주셔서 감사합니다! ?

확장하다

react native international phone number

기본 국제 전화 번호 입력에 반응합니다

특징

시도해보십시오

내용 목록

오래된 버전

설치

추가 구성

React Native CLI 사용 :

엑스포 사용 :

웹 사용 :

기본 사용

클래스 구성 요소 :

기능 구성 요소 :

TypeScript

중간 사용

TypeScript + useref

고급 사용

React-Hook-Form + TypeScript + 기본 전화 번호 값

lib 사용자 정의

다크 모드 :

맞춤형 리브 스타일 :

커스텀 케어 :

사용자 정의 자리 소유자/메시지 :

맞춤형 모달 높이 :

국가 모달 장애인 모드 :

전화 입력 비활성화 모드 :

사용자 정의 장애인 모드 스타일 :

기본 언어 변경 :

맞춤형 전화 마스크 :

사용자 정의 기본 플래그/국가 :

기본 전화 번호 값 :

Modal 내부의 일부 국가 만 보여줍니다.

Modal 내부의 일부 국가를 제외합니다.

Modal 내부의 국가 상단에 인기있는 국가를 보여줍니다.

오른쪽에서 왼쪽 입력 :

코드를 호출 한 후 0을 허용하지 마십시오.

구성 요소 소품 (PhoneInputProps)

기능

? 지원되는 언어?

기여

특허