react native country codes picker
v2.3.2
⚡ ⚡ ⚡ Cette lib. fournir plusieurs langues. sélecteur de pays ou liste de pays avec fonctionnalité de recherche. Entièrement multiplateforme et pris en charge sur React-native et expo. Vous n'avez pas trouvé votre pays ? Ajoutez simplement les pays ou paramètres régionaux requis et créez un PR. ⚡ ⚡ ⚡
Je cherche à améliorer cette bibliothèque et j'aimerais connaître votre avis sur les fonctionnalités que vous aimeriez voir dans la prochaine version. Actuellement, je rédige une feuille de route pour la prochaine version de React-Native-Country-Codes-Picker.
Se demander si la prochaine version devrait être basée sur la v3 réanimée pour des performances améliorées ou s'il est préférable d'introduire un hook flexible au lieu d'un nouveau composant. Votre contribution est cruciale pour guider le développement, alors partagez vos idées sur les ajouts ou les changements les plus précieux que vous aimeriez voir.
Si vous avez quelque chose d'intéressant ! Écrivez-nous simplement :)
expo : expo install react-native-country-codes-picker
npm : npm i react-native-country-codes-picker
fil: 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 >
) ;
}Vous trouverez ci-dessous les accessoires que vous pouvez transmettre au composant React.
| Soutenir | Taper | Défaut | Exemple | Description |
|---|---|---|---|---|
| montrer | booléen | Cet accessoire est utilisé pour afficher le modal. Mettez votre état d'affichage ici. | ||
| pickerButtonOnPress | fonction | (pays) => setCode (pays.dial_code) | Mettez votre ou vos fonctions ici pour obtenir les données du pays à partir du sélecteur. | |
| inputPlaceholder | chaîne | inputPlaceholder={'Votre espace réservé'} | Si vous avez besoin d'un espace réservé personnalisé pour votre contribution, vous aurez peut-être besoin de cet accessoire. | |
| rechercheMessage | chaîne | searchMessage={'Un message de recherche ici'} | Si vous souhaitez personnaliser le message de recherche, utilisez simplement cet accessoire. | |
| langue | chaîne | 'fr' | lang={'pl'} | Si vous devez changer la langue. mettez simplement une des langues prises en charge. Ou si vous n'avez pas trouvé la langue requise, ajoutez-les simplement et faites un PR :) |
| activerModalÉviter | booléen | FAUX | activateModalAvoiding={true} | Le modal doit-il éviter le clavier ? Sur Android, pour fonctionner, il est nécessaire d'utiliser AndroidWindowSoftInputMode avec la valeur Pan, par défaut, Android évitera le clavier par lui-même. |
| androidWindowSoftInputMode | chaîne | androidWindowSoftInputMode={'pan'} | Fondamentalement, Android évite le clavier par lui-même, si vous souhaitez utiliser une personnalisation personnalisée, vous pouvez utiliser cet accessoire | |
| Modèle d'élément | RéagirNoeud | Bouton Pays | itemTemplate={VotreTemplateComponentsHere} | Ce paramètre obtient un élément React Node pour le restituer comme modèle pour chaque élément de la liste. Ces propriétés sont envoyées à l'élément : clé, élément, style, nom et onPress |
| style | Objet | style={{yoursStylesHere}} | Si vous souhaitez modifier le style d'un composant, vous aurez probablement besoin de ces accessoires. Vous pouvez vérifier la partie style ci-dessous. | |
| désactiverBackdrop | booléen | FAUX | désactiverBackdrop | si vous ne voulez pas afficher la toile de fond modale, passez cet accessoire. |
| surBackdropPress | fonction | nul | onBackdropPress={() => setShow(false)} | Si vous souhaitez fermer le modal lorsque l'utilisateur appuie sur l'arrière-plan modal. |
| État initial | chaîne | étatinitial={'+380'} | Parfois, vous devez présélectionner le pays, par exemple en fonction de l'emplacement actuel de l'utilisateur, afin de pouvoir utiliser cet accessoire. | |
| Pays exclus | tableau | exclusCountries={['RU', 'BY']} | Dans cet accessoire, vous pouvez définir la liste des pays que vous souhaitez supprimer en ajoutant leurs codes. | |
| afficher uniquement | tableau | showOnly={['UA', 'EN']} | Cet accessoire vous permet de configurer les pays que vous souhaitez afficher. | |
| Pays populaires | tableau | popularCountries={['UA', 'EN']} | Cet accessoire vous permet d'envoyer un tableau de pays populaires à votre ListHeaderComponent. | |
| Composant d'en-tête de liste | JSX.Élément | ListHeaderComponent={ListHeaderComponent} | Cet accessoire vous permet de créer un composant d'en-tête pour afficher les pays populaires en haut de la liste ! Vérifiez la section exemple avec ListHeaderComponent |
❕ Vous pouvez également utiliser tous les autres accessoires FlatList et TextInput si vous en avez besoin. ❕
< 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"
} ,Vous pouvez ajouter votre langue. si tu as besoin !!! Mais après cela, faites un PR s'il vous plaît, cela aidera d'autres personnes.
Si vous utilisez ce package et devez cibler l'un des composants dans vos tests automatisés, nous fournissons actuellement un testID pour les composants suivants :
FlatList d'emballage : 'countryCodesPickerFlatList'TextInput de recherche de pays : 'countryCodesPickerSearchInput'TouchableOpacity ) : 'countryCodesPickerCountryButton'
