ホーム>Web サイト構築リソース>ウェブサイトデータ
ダウンロード

ネイティブの国際電話番号入力LIBプレビューを反応します

ネイティブの国際電話番号入力を反応します



特徴

  • iOS、Android（Cross-Platform）、Expo、Webで動作します。
  • ？ UIをカスタマイズ可能なLIB;
  • ？選択した国に応じた電話入力マスク。
  • ？‍機能およびクラスコンポーネントのサポート。
  • ？ 22の言語がサポートされています。

試してみてください

  • デモ

内容のリスト

  • 古いバージョン
  • インストール
  • 追加の構成
    • ネイティブCLIを反応します
    • エキスポ
    • ウェブ
  • 基本的な使用法
    • クラスコンポーネント付き
    • 関数コンポーネント付き
    • TypeScriptを使用
  • 中級使用
    • TypeScript + useref
  • 高度な使用
    • React-Hook-Form + TypeScript +デフォルトの電話番号値
  • Libのカスタマイズ
    • ダークモード
    • カスタムLIBスタイル
    • カスタムケア
    • カスタムプレースホルダー/メッセージ
    • カスタムモーダルの高さ
    • 国のモーダル障害モード
    • 電話入力無効モード
    • カスタム無効モードスタイル
    • デフォルト言語を変更します
    • カスタム電話マスク
    • カスタムデフォルトフラグ/国
    • デフォルトの電話番号値
    • モーダル内の一部の国のみを表示します
    • モーダル内の一部の国を除外してください
    • モーダル内の国の最上位に人気のある国を表示する
    • 右から左の入力
    • コードを呼び出した後、ゼロを許可しないでください
  • 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

追加の構成

  • 反応ネイティブCLIを使用：

react-native.config.jsファイルを作成します。 

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

次に、フォントをネイティブプロジェクトにリンクします。 

npx react-native-asset

  • 博覧会の使用：

  1. expo-fontsのインストール： npx expo install expo-font ;
  2. expo-fontの初期化： 
  import { useFonts } from ' expo-font ' ;

  ...

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

  ...

観察：新しいフォントを追加した後、プロジェクトを再コンパイルする必要があります。

  • Webの使用：

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フックを組み合わせて、PhoneNumberとSelectedCountryの値を管理しないでください。代わりに、そのうちの1つだけを使用することを選択します（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 >
  ) ;
}

観察：

  1. 次の形式でデフォルト値+(country callling code)(area code)(number phone)使用する必要があります。
  2. 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' ,
      } ,
    } }
  />
  . . .

  • カスタムカレット： 

  ...
  < 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"
  / >
  ...

観察：

  1. e164形式でデフォルト値を使用する必要があります： +(country callling code)(area code)(number phone)
  2. LIBには、付属のdefaultValueのフラグとマスクを設定するメカニズムがあります。ただし、提供されたdefaultValue国際標準と一致しない場合、 input mask of the defaultValue 「BR」に設定されます（デフォルト値が上記の形式であることを確認してください）。

  • モーダル内の一部の国のみを表示します： 

  ...
  < 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?:文字列;
  • value?:文字列;
  • onChangePhoneNumber?: :（ PhoneNumber：String）=> void;
  • defaultCountry?: icountrycca2;
  • selectedCountry?: icountry;
  • onChangeSelectedCountry?: :（国：icountry）=> void;
  • showOnly?: icountrycca2 [];
  • excludedCountries?: icountrycca2 [];
  • popularCountries?: icountrycca2 [];
  • popularCountriesSectionTitle?: string;
  • restOfCountriesSectionTitle?: string;
  • rtl?: boolean;
  • disabled?: Boolean;
  • 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:呼び出しコード：文字列）=> 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



立ち寄ってくれてありがとう！ ？
拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて