react native country codes picker

средство выбора кодов реагирования-родной-страны

⚡ ⚡ ⚡ Эта либ. обеспечить несколько языков. Выбор страны или список стран с функцией поиска. Полностью кроссплатформенный и поддерживается на React-native и expo. Не нашли свою страну? Просто добавьте нужные страны или регионы и сделайте PR. ⚡ ⚡ ⚡

❗Прежде чем начать! ❗

Я хочу улучшить эту библиотеку и хотел бы услышать ваши мысли о том, какие функции вы хотели бы видеть в следующей версии. В настоящее время я составляю план действий для предстоящего выпуска средства выбора кодов стран реагирования.

Подумайте, должна ли следующая версия быть основана на реанимированной v3 для повышения производительности или лучше вместо нового компонента ввести гибкий хук. Ваш вклад имеет решающее значение для руководства разработкой, поэтому поделитесь своими идеями о наиболее ценных дополнениях или изменениях, которые вы хотели бы видеть.

Вскоре ?

1. Пользовательский рендеринг входных данных поиска.
2. Документы обновляются и улучшаются для удобства пользователей.
3. Улучшения анимации.

Если у вас есть что-то интересное! Просто напишите нам :)

❕Установка❕

выставка: expo install react-native-country-codes-picker
npm: npm i react-native-country-codes-picker
пряжа: yarn add react-native-country-codes-picker

Пример

Основное использование

Модальный

 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.

Опора	Тип	По умолчанию	Пример	Описание
показывать	логическое значение			Эта опора используется для отображения модального окна. Поместите сюда свое состояние шоу.
сборщикButtonOnPress	функция		(страна) => setCode(country.dial_code)	Поместите сюда свою функцию/функции для получения данных о стране из средства выбора.
вводЗаполнитель	нить		inputPlaceholder={'Ваш заполнитель'}	Если вам нужен собственный заполнитель для ввода, вам может понадобиться эта опора.
поискСообщение	нить		searchMessage={'Здесь какое-то поисковое сообщение'}	Если вы хотите настроить поисковое сообщение, просто используйте эту опцию.
язык	нить	'эн'	язык={'pl'}	Если вам нужно изменить язык. просто поставьте один из поддерживаемых языков. Или если не нашли нужных языков, просто добавьте их и сделайте пиар :)
EnableModalAvoiding	логическое значение	ЛОЖЬ	EnableModalAvoiding={true}	Модальный режим должен избегать клавиатуры? На Android для работы необходимо использовать androidWindowSoftInputMode с панорамированием значений, по умолчанию Android будет избегать клавиатуры сам по себе.
AndroidWindowSoftInputMode	нить		androidWindowSoftInputMode={'панорамирование'}	По сути, Android избегает клавиатуры сам по себе, если вы хотите использовать собственное избегание, вы можете использовать эту опору
элементШаблон	Реактноде	СтранаКнопка	itemTemplate={YourTemplateComponentsHere}	Этот параметр получает элемент React Node для его отображения в качестве шаблона для каждого элемента списка. Эти свойства отправляются элементу: ключ, элемент, стиль, имя и onPress.
стиль	Объект		стиль = {{yoursStylesHere}}	Если вы хотите изменить стили компонента, вам, вероятно, понадобится этот реквизит. Вы можете проверить стиль ниже.
отключить фон	логическое значение	ЛОЖЬ	отключить фон	если вы не хотите показывать модальный фон, передайте эту опцию.
onBackdropPress	функция	нулевой	onBackdropPress={() => setShow(false)}	Если вы хотите закрыть модальное окно, когда пользователь нажимает на модальный фон.
начальное состояние	нить		InitialState={'+380'}	Иногда вам нужно предварительно выбрать страну, например, по текущему местоположению пользователя, чтобы вы могли использовать эту опцию.
исключенныеСтраны	множество		ExcludedCountries={['RU', 'BY']}	В этом реквизите вы можете определить список стран, которые вы хотите удалить, добавив их коды.
showOnly	множество		showOnly={['UA', 'EN']}	Эта опция позволяет вам настроить, какие страны вы хотите показывать.
популярныеСтраны	множество		PopularCountries={['UA', 'EN']}	Эта опция позволяет вам отправлять массив популярных стран в ваш ListHeaderComponent.
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"
  } ,

Вы можете добавить свой язык. если вам нужно!!! Но после этого сделайте пожалуйста пиар, это поможет другим людям.

Тестирование

Если вы используете этот пакет и вам необходимо настроить таргетинг на один из компонентов ваших автоматических тестов, в настоящее время мы предоставляем testID для следующих компонентов:

• Компонент-обертка FlatList : 'countryCodesPickerFlatList'
• Компонент TextInput для поиска по стране: 'countryCodesPickerSearchInput'
• Компонент кнопки страны ( TouchableOpacity ): 'countryCodesPickerCountryButton'