react native country codes picker
v2.3.2
⚡ ⚡ ⚡ Diese Bibliothek. Bereitstellung mehrerer Sprachen. Länderauswahl oder Länderliste mit Suchfunktion. Vollständig plattformübergreifend und unterstützt auf React-native und expo. Haben Sie Ihr Land nicht gefunden? Fügen Sie einfach die erforderlichen Länder oder Standorte hinzu und erstellen Sie eine PR. ⚡ ⚡ ⚡
Ich möchte diese Bibliothek erweitern und würde gerne Ihre Meinung dazu hören, welche Funktionen Sie in der nächsten Version sehen möchten. Derzeit entwerfe ich eine Roadmap für die bevorstehende Veröffentlichung des React-Native-Country-Codes-Pickers.
Überlegen Sie, ob die nächste Version für eine verbesserte Leistung auf der reanimierten Version 3 basieren sollte oder ob es besser ist, einen flexiblen Hook anstelle einer neuen Komponente einzuführen. Ihr Beitrag ist für die Steuerung der Entwicklung von entscheidender Bedeutung. Teilen Sie uns daher bitte Ihre Ideen zu den wertvollsten Ergänzungen oder Änderungen mit, die Sie gerne sehen würden.
Wenn Sie etwas Interessantes haben! Schreib uns einfach :)
expo: expo install react-native-country-codes-picker
npm: npm i react-native-country-codes-picker
Garn: 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 >
) ;
}Nachfolgend finden Sie die Requisiten, die Sie an die React-Komponente übergeben können.
| Stütze | Typ | Standard | Beispiel | Beschreibung |
|---|---|---|---|---|
| zeigen | Boolescher Wert | Diese Requisite dient zur Anzeige des Modals. Geben Sie hier Ihren Showstatus ein. | ||
| pickerButtonOnPress | Funktion | (Land) => setCode(country.dial_code) | Geben Sie hier Ihre Funktion(en) ein, um Länderdaten vom Picker abzurufen. | |
| inputPlaceholder | Zeichenfolge | inputPlaceholder={'Ihr Platzhalter'} | Wenn Sie einen benutzerdefinierten Platzhalter für Ihre Eingabe benötigen, benötigen Sie möglicherweise diese Requisite. | |
| Suchnachricht | Zeichenfolge | searchMessage={'Hier eine Suchnachricht'} | Wenn Sie die Suchnachricht anpassen möchten, verwenden Sie einfach diese Requisite. | |
| lang | Zeichenfolge | 'en' | lang={'pl'} | Wenn Sie die Sprache ändern müssen. Geben Sie einfach eine der unterstützten Sprachen ein. Oder wenn Sie die erforderliche Sprache nicht gefunden haben, fügen Sie sie einfach hinzu und machen Sie eine PR :) |
| enableModalAvoiding | Boolescher Wert | FALSCH | enableModalAvoiding={true} | Sollte Modal die Tastatur vermeiden? Auf Android ist die Verwendung mit androidWindowSoftInputMode mit dem Wert pan erforderlich, standardmäßig vermeidet Android die Tastatur selbst |
| androidWindowSoftInputMode | Zeichenfolge | androidWindowSoftInputMode={'pan'} | Grundsätzlich handelt es sich bei der Android-Tastatur um eine eigenständige Tastatur. Wenn Sie eine benutzerdefinierte Vermeidung verwenden möchten, können Sie diese Requisite verwenden | |
| itemTemplate | ReactNode | CountryButton | itemTemplate={YourTemplateComponentsHere} | Dieser Parameter ruft ein React Node-Element ab, um es als Vorlage für jedes Element der Liste darzustellen. Diese Eigenschaften werden an das Element gesendet: Schlüssel, Element, Stil, Name und onPress |
| Stil | Objekt | style={{yoursStylesHere}} | Wenn Sie Stile für Komponenten ändern möchten, benötigen Sie wahrscheinlich diese Requisiten. Sie können den Styling-Teil unten überprüfen. | |
| deaktivierenBackdrop | Boolescher Wert | FALSCH | deaktivierenBackdrop | Wenn Sie keinen modalen Hintergrund anzeigen möchten, geben Sie diese Requisite weiter. |
| onBackdropPress | Funktion | null | onBackdropPress={() => setShow(false)} | Wenn Sie das Modal schließen möchten, wenn der Benutzer auf den modalen Hintergrund tippt. |
| Anfangszustand | Zeichenfolge | initialState={'+380'} | Manchmal müssen Sie das Land vorab auswählen, beispielsweise anhand des aktuellen Standorts des Benutzers, damit Sie diese Requisite verwenden können. | |
| ausgeschlossene Länder | Array | ausgeschlossene Länder = {['RU', 'BY']} | In dieser Requisite können Sie eine Liste der Länder definieren, die Sie entfernen möchten, indem Sie deren Codes hinzufügen. | |
| nur Anzeigen | Array | showOnly={['UA', 'EN']} | Mit dieser Requisite können Sie konfigurieren, welche Länder Sie anzeigen möchten. | |
| beliebte Länder | Array | popularCountries={['UA', 'EN']} | Mit dieser Requisite können Sie ein Array beliebter Länder an Ihre ListHeaderComponent senden. | |
| ListHeaderComponent | JSX.Element | ListHeaderComponent={ListHeaderComponent} | Mit dieser Requisite können Sie eine Header-Komponente erstellen, um beliebte Länder ganz oben in der Liste anzuzeigen! Überprüfen Sie den Beispielabschnitt mit ListHeaderComponent |
❕ Sie können bei Bedarf auch alle anderen FlatList- und TextInput-Requisiten verwenden. ❕
< 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"
} ,Sie können Ihre Sprache hinzufügen. wenn du brauchst !!! Aber machen Sie danach bitte eine PR, es wird anderen Menschen helfen.
Wenn Sie dieses Paket verwenden und auf eine der Komponenten Ihrer automatisierten Tests abzielen müssen, stellen wir derzeit eine testID für die folgenden Komponenten bereit:
FlatList Komponente: „countryCodesPickerFlatList“TextInput Komponente für die Ländersuche: „countryCodesPickerSearchInput“TouchableOpacity ): 'countryCodesPickerCountryButton'
