react native country codes picker

react native country codes picker

기타 소스코드

v2.3.2

다운로드

반응 네이티브 국가 코드 선택기

⚡ ⚡ ⚡ 이 lib. 멀티랭을 제공합니다. 검색 기능이 있는 국가 선택기 또는 국가 목록. 완전히 크로스 플랫폼이며 React-native 및 Expo에서 지원됩니다. 해당 국가를 찾지 못하셨나요? 필요한 국가나 지역을 추가하고 PR을 작성하세요. ⚡ ⚡ ⚡

❗ 시작하기 전에! ❗

저는 이 라이브러리를 개선하려고 하며 다음 버전에서 어떤 기능을 보고 싶은지에 대한 여러분의 생각을 듣고 싶습니다. 현재 저는 다가오는 React-native-country-codes-picker 릴리스에 대한 로드맵 초안을 작성 중입니다.

성능 향상을 위해 다음 버전이 다시 애니메이션된 v3을 기반으로 해야 하는지 아니면 새로운 구성 요소 대신 유연한 후크를 도입하는 것이 더 나은지 고려합니다. 귀하의 의견은 개발을 안내하는 데 매우 중요하므로 보고 싶은 가장 중요한 추가 사항이나 변경 사항에 대한 아이디어를 공유해 주십시오.

곧 출시되나요?

사용자 정의 검색 입력 렌더링.
최고의 사용자 경험을 위해 Docs를 업데이트/개선합니다.
애니메이션 개선.

흥미로운 점이 있다면! 그냥 우리에게 편지를 보내주세요 :)

❕ 설치 ❕

엑스포: expo install react-native-country-codes-picker
npm: npm i react-native-country-codes-picker
원사: yarn add react-native-country-codes-picker

예

ezgif com-gif-maker

기본 사용법

모달

 import { CountryPicker } from "react-native-country-codes-picker" ;

export default function App ( ) {
  const [ show , setShow ] = useState ( false ) ;
  const [ countryCode , setCountryCode ] = useState ( '' ) ;

  return (
    < View style = { styles . container } >
      < TouchableOpacity
        onPress = { ( ) => setShow ( true ) }
        style = { {
            width : '80%' ,
            height : 60 ,
            backgroundColor : 'black' ,
            padding : 10 ,
        } }
      >
        < Text style = { {
            color : 'white' ,
            fontSize : 20
        } } >
            { countryCode }
        < / Text >
      < / TouchableOpacity >

      // For showing picker just put show state to show prop
      < CountryPicker
        show = { show }
        // when picker button press you will get the country object with dial code
        pickerButtonOnPress = { ( item ) => {
          setCountryCode ( item . dial_code ) ;
          setShow ( false ) ;
        } }
      / >
    < / View >
  ) ;
}

목록 헤더가 있는 모달

 import { CountryPicker } from "react-native-country-codes-picker" ;

function ListHeaderComponent ( { countries , lang , onPress } ) {
    return (
        < View
            style = { {
                paddingBottom : 20 ,
            } }
        >
            < Text >
                Popular countries
            < / Text >
            { countries ?. map ( ( country , index ) => {
                return (
                    < CountryButton key = { index } item = { country } name = { country ?. name ?. [ lang || 'en' ] } onPress = { ( ) => onPress ( country ) } / >
                )
            } ) }
        < / View >
    )
}

export default function App ( ) {
  const [ show , setShow ] = useState ( false ) ;
  const [ countryCode , setCountryCode ] = useState ( '' ) ;

  return (
    < View style = { styles . container } >
      < TouchableOpacity
        onPress = { ( ) => setShow ( true ) }
        style = { {
            width : '80%' ,
            height : 60 ,
            backgroundColor : 'black' ,
            padding : 10 ,
        } }
      >
        < Text style = { {
            color : 'white' ,
            fontSize : 20
        } } >
            { countryCode }
        < / Text >
      < / TouchableOpacity >

      // For showing picker just put show state to show prop
      < CountryPicker
        show = { show }
        // when picker button press you will get the country object with dial code
        pickerButtonOnPress = { ( item ) => {
          setCountryCode ( item . dial_code ) ;
          setShow ( false ) ;
        } }
        ListHeaderComponent = { ListHeaderComponent }
        popularCountries = { [ 'en' , 'ua' , 'pl' ] }
      / >
    < / View >
  ) ;
}

목록

 import { CountryList } from "react-native-country-codes-picker" ;

export default function App ( ) {
  const [ countryCode , setCountryCode ] = useState ( '' ) ;

  return (
    < View style = { styles . container } >
      < View        
        style = { {
            width : '80%' ,
            height : 60 ,
            backgroundColor : 'black' ,
            padding : 10 ,
        } }
      >
        < Text style = { {
            color : 'white' ,
            fontSize : 20
        } } >
            { countryCode }
        < / Text >
      < / TouchableOpacity >

      // All props the same as for picker
       < CountryList
          lang = { 'pl' }
          pickerButtonOnPress = { ( item ) => {
              setCountryCode ( item . dial_code ) ;
          } }
       / >
    < / View >
  ) ;
}

소품

다음은 React 컴포넌트에 전달할 수 있는 props입니다.

소품	유형	기본	예	설명
보여주다	부울			모달을 표시하는 데 사용되는 소품입니다. 여기에 쇼 상태를 입력하세요.
선택기버튼온프레스	기능		(국가) => setCode(country.dial_code)	선택기에서 국가 데이터를 가져오려면 여기에 함수를 입력하세요.
입력 자리 표시자	끈		inputPlaceholder={'당신의 자리 표시자'}	입력에 대한 사용자 지정 자리 표시자가 필요한 경우 이 소품이 필요할 수 있습니다.
검색메시지	끈		searchMessage={'여기에 검색 메시지가 있습니다'}	검색 메시지를 맞춤 설정하려면 이 소품을 사용하세요.
랭	끈	'엔'	랭={'pl'}	언어를 변경해야 하는 경우. 지원되는 언어 중 하나를 넣으면 됩니다. 또는 필요한 언어를 찾지 못한 경우 해당 언어를 추가하고 PR을 작성하세요 :)
활성화 모달회피	부울	거짓	활성화ModalAvoiding={true}	모달은 키보드를 피해야 합니까? android에서 작동하려면 androidWindowSoftInputMode와 값 pan을 함께 사용해야 하며, 기본적으로 android는 키보드 자체를 피합니다.
androidWindowSoftInputMode	끈		androidWindowSoftInputMode={'pan'}	기본적으로 안드로이드는 키보드 자체를 피합니다. 사용자 정의 회피를 사용하려면 이 소품을 사용할 수 있습니다.
항목템플릿	ReactNode	국가버튼	itemTemplate={YourTemplateComponentsHere}	이 매개변수는 목록의 각 항목에 대한 템플릿으로 렌더링하기 위해 React Node 요소를 가져옵니다. 키, 항목, 스타일, 이름, onPress 등의 속성이 항목으로 전송됩니다.
스타일	물체		스타일={{yoursStylesHere}}	구성 요소의 스타일을 변경하려면 아마도 이 소품이 필요할 것입니다. 스타일링 부분은 아래에서 확인하실 수 있습니다.
비활성화배경	부울	거짓	비활성화배경	모달 배경화면을 표시하고 싶지 않다면 이 소품을 전달하세요.
onBackdropPress	기능	null	onBackdropPress={() => setShow(false)}	사용자가 모달 배경을 탭할 때 모달을 닫으려는 경우.
초기 상태	끈		초기상태={'+380'}	때로는 이 소품을 사용할 수 있도록 사용자의 현재 위치 등을 기준으로 국가를 미리 선택해야 하는 경우가 있습니다.
제외국가	정렬		제외국가={['RU', 'BY']}	이 소품에서는 코드를 추가하여 제거하려는 국가 목록을 정의할 수 있습니다.
표시만	정렬		showOnly={['UA', 'EN']}	이 소품을 사용하면 표시하려는 국가를 구성할 수 있습니다.
인기있는국가	정렬		PopularCountries={['UA', 'EN']}	이 소품을 사용하면 인기 있는 국가 배열을 ListHeaderComponent로 보낼 수 있습니다.
목록헤더구성요소	JSX.요소		ListHeaderComponent={ListHeaderComponent}	이 소품을 사용하면 인기 국가를 목록 상단에 표시하는 헤더 구성 요소를 만들 수 있습니다! ListHeaderComponent로 예제 섹션을 확인하세요.

❕ 또한 필요한 경우 다른 모든 FlatList 및 TextInput 소품을 사용할 수 있습니다. ❕

스타일링

 < CountryPicker
    show = { show }
    lang = { 'cz' }
    style = { {
        // Styles for whole modal [View]
        modal : {
            height : 500 ,
            backgroundColor : 'red'
        } ,
        // Styles for modal backdrop [View]
        backdrop : {
        
        } ,
        // Styles for bottom input line [View]
        line : {
        
        } ,
        // Styles for list of countries [FlatList]
        itemsList : {
        
        } ,
        // Styles for input [TextInput]
        textInput : {
              height : 80 ,
              borderRadius : 0 ,
        } ,
        // Styles for country button [TouchableOpacity]
        countryButtonStyles : {
              height : 80
        } ,
        // Styles for search message [Text]
        searchMessageText : {

        } ,
        // Styles for search message container [View]
        countryMessageContainer : {
        
        } ,
        // Flag styles [Text]
        flag : {

        } ,
        // Dial code styles [Text]
        dialCode : {

        } ,
        // Country name styles [Text]
        countryName : {

        }
    } }
    pickerButtonOnPress = { ( item ) => {
        setCountryCode ( item . dial_code ) ;
        setShow ( false ) ;
    } }
/ >

? 지원되는 언어. ?

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