react native country codes picker
v2.3.2
⚡ ⚡ ⚡ Esta biblioteca. fornecer vários idiomas. seletor de países ou lista de países com funcionalidade de pesquisa. Totalmente multiplataforma e compatível com React nativo e expo. Não encontrou seu país? Basta adicionar os países ou localidades necessários e fazer um PR. ⚡ ⚡ ⚡
Estou procurando aprimorar esta biblioteca e adoraria ouvir sua opinião sobre quais recursos você gostaria de ver na próxima versão. Atualmente, estou elaborando um roteiro para o próximo lançamento do react-native-country-codes-picker.
Considerando se a próxima versão deve ser baseada na v3 reanimada para melhorar o desempenho ou se é melhor introduzir um gancho flexível em vez de um novo componente. Sua opinião é crucial para orientar o desenvolvimento, portanto, compartilhe suas ideias sobre as adições ou alterações mais valiosas que você gostaria de ver.
Se você tem algo interessante! Basta escrever para nós :)
expo: expo install react-native-country-codes-picker
npm: npm i react-native-country-codes-picker
fio: 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 >
) ;
}Abaixo estão os adereços que você pode passar para o componente React.
| Suporte | Tipo | Padrão | Exemplo | Descrição |
|---|---|---|---|---|
| mostrar | booleano | Este suporte é usado para exibir o modal. Coloque seu estado de show aqui. | ||
| selecionadorButtonOnPress | função | (país) => setCode(país.dial_code) | Coloque sua função/funções aqui para obter dados do país do seletor. | |
| entradaPlaceholder | corda | inputPlaceholder={'Seu espaço reservado'} | Se você precisar de um espaço reservado personalizado para sua entrada, poderá precisar deste suporte. | |
| mensagem de pesquisa | corda | searchMessage={'Alguma mensagem de pesquisa aqui'} | Se você quiser personalizar a mensagem de pesquisa, basta usar este acessório. | |
| idioma | corda | 'pt' | idioma={'pl'} | Se você precisar alterar o idioma. basta colocar um dos idiomas suportados. Ou se você não encontrou o idioma necessário, basta adicioná-lo e fazer um PR :) |
| enableModalAvoiding | booleano | falso | enableModalAvoiding={true} | O modal deve evitar o teclado? No Android para funcionar, é necessário usar o androidWindowSoftInputMode com valor pan, por padrão o Android evitará o teclado sozinho |
| androidWindowSoftInputMode | corda | androidWindowSoftInputMode={'pan'} | Basicamente, o Android evita o teclado sozinho, se você quiser usar a evitação personalizada, você pode usar este suporte | |
| itemTemplate | ReactNode | PaísButton | itemTemplate={SeuTemplateComponentsAqui} | Este parâmetro obtém um elemento React Node para renderizá-lo como um modelo para cada item da lista. Estas propriedades são enviadas para o item: chave, item, estilo, nome e onPress |
| estilo | Objeto | style={{seusEstilosAqui}} | Se você deseja alterar os estilos do componente, provavelmente precisará desses acessórios. Você pode verificar a parte de estilo abaixo. | |
| desabilitarBackdrop | booleano | falso | desabilitarBackdrop | se você não quiser mostrar o cenário modal, passe este adereço. |
| onBackdropPress | função | nulo | onBackdropPress={() => setShow(false)} | Se você deseja fechar o modal quando o usuário toca no plano de fundo do modal. |
| estado inicial | corda | estadoinicial={'+380'} | Às vezes você precisa pré-selecionar o país, por exemplo, pela localização atual do usuário, para poder usar este suporte. | |
| países excluídos | variedade | paísesexcluídos={['RU', 'POR']} | Neste adereço você pode definir a lista de países que deseja remover adicionando seus códigos. | |
| mostrar apenas | variedade | showOnly={['UA', 'EN']} | Este suporte permite que você configure quais países deseja mostrar. | |
| países populares | variedade | popularCountries={['UA', 'EN']} | Este suporte permite que você envie uma matriz de países populares para o seu ListHeaderComponent. | |
| ListHeaderComponent | JSX.Elemento | ListHeaderComponent={ListHeaderComponent} | Este suporte permite que você crie um componente de cabeçalho para mostrar países populares no topo da lista! Verifique a seção de exemplo com ListHeaderComponent |
❕ Além disso, você pode usar todos os outros adereços FlatList e TextInput se precisar. ❕
< 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"
} ,Você pode adicionar seu idioma. se precisar!!! Mas depois disso faça um PR por favor, vai ajudar outras pessoas.
Se você estiver usando este pacote e precisar direcionar um dos componentes em seus testes automatizados, atualmente fornecemos um testID para os seguintes componentes:
FlatList : 'countryCodesPickerFlatList'TextInput de pesquisa de país: 'countryCodesPickerSearchInput'TouchableOpacity ): 'countryCodesPickerCountryButton'
