react native country codes picker
v2.3.2
⚡ ⚡ ⚡ Esta lib. proporcionar varios idiomas. selector de países o lista de países con función de búsqueda. Totalmente multiplataforma y compatible con React-native y expo. ¿No encontraste tu país? Simplemente agregue los países o locales requeridos y haga un PR. ⚡ ⚡ ⚡
Estoy buscando mejorar esta biblioteca y me encantaría escuchar su opinión sobre las características que le gustaría ver en la próxima versión. Actualmente, estoy redactando una hoja de ruta para el próximo lanzamiento del selector de códigos de país nativo de reacción.
Considerando si la próxima versión debería basarse en la v3 reanimada para mejorar el rendimiento o si es mejor introducir un gancho flexible en lugar de un nuevo componente. Su aporte es crucial para guiar el desarrollo, así que comparta sus ideas sobre las adiciones o cambios más valiosos que le gustaría ver.
Si tienes algo interesante! Sólo escríbenos :)
expo: expo install react-native-country-codes-picker
npm: npm i react-native-country-codes-picker
hilo: 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 >
) ;
}A continuación se muestran los accesorios que puede pasar al componente React.
| Apuntalar | Tipo | Por defecto | Ejemplo | Descripción |
|---|---|---|---|---|
| espectáculo | booleano | Este accesorio se utiliza para mostrar el modal. Pon el estado de tu programa aquí. | ||
| selectorBotónAlPresionar | función | (país) => setCode(país.dial_code) | Coloque su función/funciones aquí para obtener datos del país del selector. | |
| marcador de posición de entrada | cadena | inputPlaceholder={'Tu marcador de posición'} | Si necesita un marcador de posición personalizado para su entrada, es posible que necesite este accesorio. | |
| mensaje de búsqueda | cadena | searchMessage={'Algún mensaje de búsqueda aquí'} | Si desea personalizar el mensaje de búsqueda, utilice este accesorio. | |
| idioma | cadena | 'es' | idioma={'pl'} | Si necesita cambiar el idioma. simplemente coloque uno de los idiomas admitidos. O si no encontró el idioma requerido, simplemente agréguelo y haga un PR :) |
| enableModalEvitar | booleano | FALSO | enableModalAvoiding={verdadero} | ¿El modal debería evitar el teclado? En Android, para funcionar es necesario utilizar AndroidWindowSoftInputMode con valor pan, de forma predeterminada, Android evitará el teclado por sí solo. |
| androidWindowSoftInputModo | cadena | androidWindowSoftInputMode={'pan'} | Básicamente, Android evita el teclado por sí solo, si desea utilizar una función de evitación personalizada, puede utilizar este accesorio. | |
| plantilla de artículo | ReaccionarNodo | Botón País | itemTemplate={Sus componentes de plantilla aquí} | Este parámetro obtiene un elemento React Node para representarlo como una plantilla para cada elemento de la lista. Estas propiedades se envían al elemento: clave, elemento, estilo, nombre y onPress. |
| estilo | Objeto | estilo = {{yoursStylesHere}} | Si desea cambiar los estilos de un componente, probablemente necesite estos accesorios. Puedes consultar la parte de estilo a continuación. | |
| desactivarTelón de fondo | booleano | FALSO | desactivarTelón de fondo | Si no quieres mostrar el fondo modal, pasa este accesorio. |
| enBackdropPress | función | nulo | onBackdropPress={() => setShow(false)} | Si desea cerrar modal cuando el usuario toca el fondo modal. |
| estado inicial | cadena | estadoinicial={'+380'} | A veces es necesario preseleccionar el país, por ejemplo, según la ubicación actual del usuario, para poder utilizar este accesorio. | |
| Países excluidos | formación | Países excluidos={['RU', 'BY']} | En este accesorio puede definir la lista de países que desea eliminar agregando sus códigos. | |
| mostrar solo | formación | showOnly={['UA', 'ES']} | Este accesorio le permite configurar qué países desea mostrar. | |
| países populares | formación | paisespopulares={['UA', 'ES']} | Este accesorio le permite enviar una matriz de países populares a su ListHeaderComponent. | |
| Componente de encabezado de lista | Elemento JSX | ListHeaderComponent={ListHeaderComponent} | ¡Este accesorio le permite crear un componente de encabezado para mostrar los países populares en la parte superior de la lista! Consulte la sección de ejemplo con ListHeaderComponent |
❕ También puedes usar todos los demás accesorios FlatList y TextInput si lo necesitas. ❕
< 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"
} ,Puedes agregar tu idioma. si lo necesitas!!! Pero después de eso, haga un PR por favor, ayudará a otras personas.
Si está utilizando este paquete y necesita apuntar a uno de los componentes en sus pruebas automatizadas, actualmente proporcionamos un testID para los siguientes componentes:
FlatList envolvente: 'countryCodesPickerFlatList'TextInput de búsqueda de países: 'countryCodesPickerSearchInput'TouchableOpacity ): 'countryCodesPickerCountryButton'
