Okvir za unos telefona za React Native
Reagirajte izvorni telefonski ulaz
Okvir za unos telefona za React Native
 |  |
|---|
Montaža
npm i react-native-phone-input --save Osnovna upotreba
import PhoneInput from 'react-native-phone-input' render(){ return( <PhoneInput ref='phone'/> ) } Prilagodite svoj vlastiti alat za odabir
 |  |
|---|
- u componentDidMount, zadržite this.phone.getPickerData () u stanju
- stvorite funkciju za otvaranje vašeg modala (na primjer onPressFlag)
- nazovite ovaj.phone.selectCountry za postavljenu državu
componentDidMount(){ this.setState({ pickerData: this.phone.getPickerData() }) } onPressFlag(){ this.myCountryPicker.open() } selectCountry(country){ this.phone.selectCountry(country.iso2) } render(){ return( <View style={styles.container}> <PhoneInput ref={(ref) => { this.phone = ref; }} onPressFlag={this.onPressFlag} /> <ModalPickerImage ref={(ref) => { this.myCountryPicker = ref; }} data={this.state.pickerData} onChange={(country)=>{ this.selectCountry(country) }} cancelText='Cancel' /> View> ) } pogledajte cijeli primjer prilagođenog birača
Birač prilagođene biblioteke
iskoristite sjajno reagirati-zavičajna-zemlja-berač-modalna za odabir zemlje
kernel panic ne sinkronizira
 |  |
|---|
onPressFlag(){ this.countryPicker.openModal() } selectCountry(country){ this.phone.selectCountry(country.cca2.toLowerCase()) this.setState({cca2: country.cca2}) } render(){ return( <View style={styles.container}> <PhoneInput ref={(ref) => { this.phone = ref; }} onPressFlag={this.onPressFlag} /> <CountryPicker ref={(ref) => { this.countryPicker = ref; }} onChange={(value)=> this.selectCountry(value)} translation='eng' cca2={this.state.cca2} > <View>View> CountryPicker> View> ) } pogledajte cijeli primjer odabira prilagođene biblioteke
Prilagođene zemlje
<PhoneInput countriesList={require('./countries.json')} /> Konfiguracija
Svojstva:
| Naziv nekretnine | Tip | Zadano | Opis |
|---|---|---|---|
| initialCountry | niz | 'nas' | početno odabrana zemlja |
| allowZeroAfterCountryCode | bool | pravi | dopustiti unos korisnika 0 iza koda zemlje |
| onemogućeno | bool | lažno | ako je istina, onemogućite svu interakciju ove komponente |
| vrijednost | niz | null | početni telefonski broj |
| stil | objekt | null | prilagođeni stilovi koji će se primijeniti ako su isporučeni |
| flagStyle | objekt | null | prilagođeni stilovi za sliku zastave, npr. {{width: 50, height: 30, borderWidth: 0}} |
| textStyle | objekt | null | prilagođeni stilovi za unos teksta telefonskog broja, npr. {{fontSize: 14}} |
| textProps | objekt | null | svojstva za unos teksta telefonskog broja, npr. {{placeholder: 'Telephone number'}} |
| textComponent | funkcija | Polje za tekst | ulaznu komponentu za korištenje |
| pomak | int | 10 | udaljenost između zastave i telefonskog broja |
| pickerButtonColor | niz | '#007AFF' | postavi boju gumba za odabir zemlje |
| pickerBackgroundColor | niz | 'Bijela' | postavite boju pozadine birača zemlje |
| pickerItemStyle | objekt | null | prilagođeni stilovi za tekst u biraču zemlje, npr. {{fontSize: 14}} |
| cancelText | niz | 'Otkazati' | otkaži riječ |
| confirmText | niz | 'Potvrdi' | potvrdite riječ |
| buttonTextStyle | objekt | null | prilagođeni stilovi za gumb za odabir zemlje |
| onChangePhoneNumber | funkcija (broj) | null | funkcija koja se poziva pri promjeni telefonskog broja |
| onSelectCountry | funkcija (iso2) | null | funkcija koja se može pozvati pri odabiru birača zemlje |
| onPressFlag | funkcija() | null | funkcija koja se poziva pri pritisku na sliku zastavice |
| countryList | nizu | null | popis prilagođenih zemalja |
| autoFormat | bool | lažno | automatski formatira telefonski broj pri unosu |
Funkcije:
| Naziv funkcije | Vrsta povrata | Parametri | Opis |
|---|---|---|---|
| isValidNumber | boolean | nijedan | vrati true ako je trenutni telefonski broj ispravan |
| getNumberType | niz | nijedan | vratiti pravu vrstu trenutnog telefonskog broja |
| getValue | niz | nijedan | vratiti trenutni telefonski broj |
| getFlag | objekt | iso2: niz | povratna slika zastavice |
| getAllCountries | objekt | nijedan | objekt povratne zemlje u biraču zemlje |
| getPickerData | objekt | nemoj | objekt povratne zemlje sa slikom zastave |
| usredotočenost | poništiti | nijedan | usredotočite ulaz telefona |
| zamućenje | poništiti | nijedan | zamagliti ulaz telefona |
| Odaberi državu | poništiti | iso2: niz | podesite ulaz telefona na određenu zemlju |
| getCountryCode | niz | nijedan | pozivni broj povratne zemlje trenutnog telefonskog broja |
| getISOCode | niz | nijedan | iso kod za povratak zemlje s trenutnog telefonskog broja |
| onPressCancel | funkcija | nijedan | rukovatelj koji će se pozvati kada dodirne gumb za odustajanje |
| onPressConfirm | funkcija | nijedan | rukovatelj koji se poziva kada dodirne gumb za potvrdu |
Preuzmite pojedinosti:
Autor: thegamenicorus
GitHub: https://github.com/thegamenicorus/react-native-phone-input
boruta izbor značajki python
#reagiranje izvorno #programiranje