react native international phone number Загрузите - react native international phone number Thecr

React Native International Number Number Preview Lib Preview

Отрешите ввод номера номера телефона Native Native

Функции

Работает с iOS, Android (кроссплатформенным), выставкой и Интернетом;
? LIB с пользовательским интерфейсом настраивается;
? Маска ввода телефона в соответствии с выбранной страной;
? ‍ Функциональная и классовая поддержка компонентов;
? 22 языка поддерживаются.

Попробуйте это

Демо

Список содержимого

Старые версии
Установка
Дополнительная конфигурация
- Реагировать Native Cli
- Экспо
- Веб -
Основное использование
- С классовым компонентом
- С функциональным компонентом
- С типографией
Промежуточное использование
- TypeScript + USEREF
Расширенное использование
- React-hook-form + typescript + значение номера телефона по умолчанию
Настройка Lib
- Темный режим
- Пользовательские стили LIB
- Пользовательская каретка
- Пользовательские заполнители/сообщения
- Пользовательская модальная высота
- Страна модальный режим отключения
- Режим отключения ввода телефона
- Пользовательский стиль отключенного режима
- Изменить язык по умолчанию
- Пользовательская телефонная маска
- Пользовательский флаг по умолчанию/страна
- Значение номера телефона по умолчанию
- Покажите только некоторые страны внутри Modal
- Исключить некоторые страны внутри модала
- Показать популярные страны на вершине списка стран в модале
- Справа к левому входу
- Не разрешайте ноль после вызова кода
LIB Reps
FUNCTIONS 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

Дополнительная конфигурация

Используя Native CLI React:

Создайте файл react-native.config.js в корне вашего проекта React-Clive с:

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

Затем свяжите шрифт с вашими родными проектами с:

npx react-native-asset

Использование Expo:

Установка выставки: 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 >
  ) ;
}

Машинопись

 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 >
  ) ;
}

Наблюдение: не используйте крюк USEREF в сочетании с крючком USESTATE для управления значениями PhonNembumber и Selected Country. Вместо этого выберите использовать только один из них (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

Пользовательские стили LIB

Темный режим:

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

Пользовательские стили LIB:

  ...
  < 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' ,
      } ,
    } }
  />
  . . .

Custom Caret:

  ...
  < 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' ] }
  />
  . . .

Исключить некоторые страны внутри Модала:

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

Покажите популярные страны на вершине списка стран в модале:

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

Право к левому входу:

  import { I18nManager } from "react-native" ;

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

Не допускайте ноль после вызова кода:

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

Компонентные реквизиты (PhoneInputProps)

language?: Ilanguage;
customMask?: String [];
defaultValue?: String;
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?: Boolean;
modalHeight?: номер | нить;
theme?: itheme;
phoneInputStyles?: iPhoneInputstyles;
modalStyles?: Imodalstyles;
modalSearchInputPlaceholder?: String;
modalSearchInputPlaceholderTextColor?: String;
modalSearchInputSelectionColor?: String;
modalNotFoundCountryMessage?: String;
customCaret?: ReactNode;
ref?: ref <iPhoneInputRef>;
allowZeroAfterCallingCode?: Boolean

Функции

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

Ремонтировать, обновить и наслаждаться?
Создайте новый пиар для этого репозитория

Лицензия

ISC

Спасибо, что зашли! ?

Расширять

react native international phone number

Отрешите ввод номера номера телефона Native Native

Функции

Попробуйте это

Список содержимого

Старые версии

Установка

Дополнительная конфигурация

Используя Native CLI React:

Использование Expo:

Использование Интернета:

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

Компонент класса:

Функциональный компонент:

Машинопись

Промежуточное использование

TypeScript + USEREF

Расширенное использование

React-hook-form + typescript + значение номера телефона по умолчанию

Настройка Lib

Темный режим:

Пользовательские стили LIB:

Custom Caret:

Пользовательские заполнители/сообщения:

Пользовательская модальная высота:

Страна модальный отключенный режим:

Ввод телефона отключенный режим:

Пользовательский стиль отключенного режима:

Изменить язык по умолчанию:

Пользовательская телефонная маска:

Пользовательский флаг/страна по умолчанию:

Значение номера телефона по умолчанию:

Покажите только некоторые страны внутри Modal:

Исключить некоторые страны внутри Модала:

Покажите популярные страны на вершине списка стран в модале:

Право к левому входу:

Не допускайте ноль после вызова кода:

Компонентные реквизиты (PhoneInputProps)

Функции

? Поддерживаемые языки?

Внося

Лицензия