react native country codes picker
v2.3.2
⚡ ⚡ ⚡ Perpustakaan ini. menyediakan multi bahasa. pemilih negara atau daftar negara dengan fungsi pencarian. Sepenuhnya lintas platform dan didukung pada React-native dan expo. Tidak menemukan negara Anda? Cukup tambahkan negara atau lokal yang diperlukan dan buat PR. ⚡ ⚡ ⚡
Saya ingin menyempurnakan perpustakaan ini dan ingin mendengar pendapat Anda tentang fitur apa yang ingin Anda lihat di versi berikutnya. Saat ini, saya sedang menyusun peta jalan untuk rilis pemilih kode negara asli-reaksi yang akan datang.
Mempertimbangkan apakah versi berikutnya harus didasarkan pada v3 yang dihidupkan kembali untuk meningkatkan kinerja atau lebih baik memperkenalkan pengait fleksibel daripada komponen baru. Masukan Anda sangat penting dalam memandu pengembangan, jadi silakan sampaikan ide Anda tentang penambahan atau perubahan paling berharga yang ingin Anda lihat.
Jika Anda memiliki sesuatu yang menarik! Tulis saja kepada kami :)
pameran: expo install react-native-country-codes-picker
npm: npm i react-native-country-codes-picker
benang: 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 >
) ;
}Di bawah ini adalah props yang dapat Anda berikan ke React Component.
| Menopang | Jenis | Bawaan | Contoh | Keterangan |
|---|---|---|---|---|
| menunjukkan | boolean | Prop ini digunakan untuk menampilkan modal. Letakkan status pertunjukan Anda di sini. | ||
| pickerButtonOnPress | fungsi | (negara) => setCode(negara.dial_code) | Letakkan fungsi/fungsi Anda di sini untuk mendapatkan data negara dari alat pilih. | |
| masukanPlaceholder | rangkaian | inputPlaceholder={'Placeholder Anda'} | Jika Anda memerlukan placeholder khusus untuk masukan Anda, Anda mungkin memerlukan alat bantu ini. | |
| pesan pencarian | rangkaian | searchMessage={'Ada pesan pencarian di sini'} | Jika Anda ingin menyesuaikan pesan pencarian, gunakan saja prop ini. | |
| bahasa | rangkaian | 'en' | lang={'pl'} | Jika Anda perlu mengubah bahasa. cukup masukkan salah satu bahasa yang didukung. Atau jika Anda tidak menemukan bahasa yang diperlukan, tambahkan saja dan buat PR :) |
| aktifkanModalAvoiding | boolean | PALSU | aktifkanModalAvoiding={benar} | Apakah modal harus menghindari keyboard? Di android agar berfungsi diharuskan menggunakan androidWindowSoftInputMode dengan value pan, secara default android akan menghindari keyboard dengan sendirinya |
| androidWindowSoftInputMode | rangkaian | androidWindowSoftInputMode={'pan'} | Pada dasarnya Android menghindari keyboard dengan sendirinya, jika Anda ingin menggunakan penghindaran khusus, Anda dapat menggunakan prop ini | |
| Templat item | ReactNode | Tombol Negara | itemTemplate={KomponenTemplate AndaDi Sini} | Parameter ini mendapatkan elemen React Node untuk menjadikannya sebagai templat untuk setiap item dalam daftar. Properti ini dikirim ke item: key, item, style, name, dan onPress |
| gaya | Obyek | gaya={{milikmuGayaDi Sini}} | Jika Anda ingin mengubah gaya komponen, Anda mungkin memerlukan alat peraga ini. Anda dapat memeriksa bagian penataan gaya di bawah ini. | |
| nonaktifkan Latar Belakang | boolean | PALSU | nonaktifkan Latar Belakang | jika Anda tidak ingin menampilkan latar belakang modal, lewati prop ini. |
| diBackdropPress | fungsi | batal | onBackdropPress={() => setShow(salah)} | Jika Anda ingin menutup modal saat pengguna mengetuk latar belakang modal. |
| keadaan awal | rangkaian | keadaan awal={'+380'} | Terkadang Anda perlu memilih negara terlebih dahulu misalnya berdasarkan lokasi pengguna saat ini sehingga Anda dapat menggunakan prop ini. | |
| negara-negara yang dikecualikan | susunan | pengecualianNegara={['RU', 'BY']} | Dalam prop ini Anda dapat menentukan daftar negara yang ingin Anda hapus dengan menambahkan kodenya. | |
| hanya tampilkan | susunan | showOnly={['UA', 'EN']} | Prop ini memungkinkan Anda mengonfigurasi negara mana yang ingin Anda tampilkan. | |
| Negara populer | susunan | negara populer={['UA', 'EN']} | Prop ini memungkinkan Anda mengirim array negara-negara populer ke ListHeaderComponent Anda. | |
| Komponen ListHeader | BEJ.Elemen | ListHeaderComponent={ListHeaderComponent} | Prop ini memungkinkan Anda membuat komponen header untuk menampilkan negara-negara populer di daftar teratas! Periksa bagian contoh dengan ListHeaderComponent |
❕ Anda juga dapat menggunakan semua props FlatList dan TextInput lainnya jika diperlukan. ❕
< 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"
} ,Anda dapat menambahkan bahasa Anda. jika Anda perlu!!! Tapi setelah itu tolong buatkan PR, itu akan membantu orang lain.
Jika Anda menggunakan paket ini dan perlu menargetkan salah satu komponen dalam pengujian otomatis Anda, saat ini kami menyediakan testID untuk komponen berikut:
FlatList : 'countryCodesPickerFlatList'TextInput penelusuran negara: 'countryCodesPickerSearchInput'TouchableOpacity ): 'countryCodesPickerCountryButton'
