react native country codes picker
v2.3.2
⚡ ⚡ ⚡ lib นี้. ให้หลายภาษา ตัวเลือกประเทศหรือรายชื่อประเทศพร้อมฟังก์ชันการค้นหา ข้ามแพลตฟอร์มเต็มรูปแบบและรองรับบน React-native และ expo ไม่พบประเทศของคุณ? เพียงเพิ่มประเทศหรือสถานที่ที่ต้องการแล้วทำการประชาสัมพันธ์
ฉันต้องการปรับปรุงห้องสมุดนี้ และอยากได้ยินความคิดเห็นของคุณเกี่ยวกับฟีเจอร์ที่คุณต้องการเห็นในเวอร์ชันถัดไป ขณะนี้ ฉันกำลังร่างแผนงานสำหรับการเปิดตัว react-native-country-codes-picker ที่กำลังจะเปิดตัวเร็วๆ นี้
พิจารณาว่าเวอร์ชันถัดไปควรอิงตาม v3 ที่ได้รับการปรับปรุงใหม่เพื่อประสิทธิภาพที่ดีขึ้น หรือควรแนะนำ hook ที่ยืดหยุ่นแทนส่วนประกอบใหม่หรือไม่ ข้อมูลของคุณมีความสำคัญอย่างยิ่งในการชี้แนะการพัฒนา ดังนั้นโปรดแบ่งปันแนวคิดของคุณเกี่ยวกับการเพิ่มเติมหรือการเปลี่ยนแปลงที่มีค่าที่สุดที่คุณต้องการเห็น
หากคุณมีอะไรน่าสนใจ ! เพียงแค่เขียนถึงเรา :)
งานแสดงสินค้า: expo install react-native-country-codes-picker
npm: npm i react-native-country-codes-picker
เส้นด้าย: 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 >
) ;
}ด้านล่างนี้คืออุปกรณ์ประกอบฉากที่คุณสามารถส่งผ่านไปยัง React Component
| ข้อเสนอ | พิมพ์ | ค่าเริ่มต้น | ตัวอย่าง | คำอธิบาย |
|---|---|---|---|---|
| แสดง | บูลีน | เสานี้ใช้สำหรับแสดงโมดอล ใส่สถานะการแสดงของคุณที่นี่ | ||
| ตัวเลือกปุ่ม OnPress | การทำงาน | (ประเทศ) => setCode(country.dial_code) | วางฟังก์ชัน/ฟังก์ชันของคุณที่นี่เพื่อรับข้อมูลประเทศจากเครื่องมือเลือก | |
| inputPlaceholder | เชือก | inputPlaceholder={'ตัวยึดตำแหน่งของคุณ'} | หากคุณต้องการตัวยึดตำแหน่งแบบกำหนดเองสำหรับการป้อนข้อมูลของคุณ คุณอาจต้องใช้อุปกรณ์ประกอบฉากนี้ | |
| ค้นหาข้อความ | เชือก | searchMessage={'ข้อความค้นหาบางส่วนที่นี่'} | หากคุณต้องการปรับแต่งข้อความค้นหา เพียงใช้อุปกรณ์ประกอบฉากนี้ | |
| หลาง | เชือก | 'en' | lang={'pl'} | หากคุณต้องการเปลี่ยนภาษา เพียงใส่หนึ่งใน lang ที่รองรับ หรือหากคุณไม่พบ lang ที่ต้องการ เพียงเพิ่มและทำการประชาสัมพันธ์ :) |
| เปิดใช้งาน ModalAvoiding | บูลีน | เท็จ | EnableModalAvoiding={จริง} | Modal ควรหลีกเลี่ยงแป้นพิมพ์หรือไม่? บน Android ในการทำงานจำเป็นต้องใช้กับ androidWindowSoftInputMode พร้อมการเลื่อนค่า โดยค่าเริ่มต้น Android จะหลีกเลี่ยงแป้นพิมพ์ด้วยตัวเอง |
| androidWindowSoftInputMode | เชือก | androidWindowSoftInputMode={'แพน'} | โดยพื้นฐานแล้ว Android หลีกเลี่ยงแป้นพิมพ์ด้วยตัวเอง หากคุณต้องการใช้การหลีกเลี่ยงแบบกำหนดเอง คุณสามารถใช้เสานี้ได้ | |
| รายการเทมเพลต | ปฏิกิริยาโหนด | ประเทศปุ่ม | itemTemplate={YourTemplateComponentsHere} | พารามิเตอร์นี้รับองค์ประกอบ React Node เพื่อแสดงผลเป็นเทมเพลตสำหรับแต่ละรายการในรายการ คุณสมบัติเหล่านี้จะถูกส่งไปยังรายการ: คีย์ รายการ สไตล์ ชื่อ และ onPress |
| สไตล์ | วัตถุ | style={{yoursStylesHere}} | หากคุณต้องการเปลี่ยนสไตล์สำหรับส่วนประกอบ คุณอาจต้องใช้อุปกรณ์ประกอบฉากนี้ คุณสามารถตรวจสอบส่วนจัดแต่งทรงผมด้านล่าง | |
| ปิดการใช้งานฉากหลัง | บูลีน | เท็จ | ปิดการใช้งานฉากหลัง | หากคุณไม่ต้องการแสดงฉากหลังแบบกิริยาให้ผ่านเสานี้ |
| บนฉากหลังกด | การทำงาน | โมฆะ | onBackdropPress={() => setShow(false)} | หากคุณต้องการปิดโมดอลเมื่อผู้ใช้แตะที่พื้นหลังโมดอล |
| สถานะเริ่มต้น | เชือก | InitialState={'+380'} | บางครั้งคุณจำเป็นต้องเลือกประเทศล่วงหน้า เช่น ตามตำแหน่งปัจจุบันของผู้ใช้ เพื่อที่คุณจะสามารถใช้เสานี้ได้ | |
| ไม่รวมประเทศ | อาร์เรย์ | ไม่รวมประเทศ={['RU', 'BY']} | ในข้อเสนอนี้ คุณสามารถกำหนดรายชื่อประเทศที่คุณต้องการลบออกได้โดยการเพิ่มรหัส | |
| แสดงเท่านั้น | อาร์เรย์ | showOnly={['UA', 'EN']} | เสานี้ช่วยให้คุณกำหนดค่าประเทศที่คุณต้องการแสดงได้ | |
| ประเทศยอดนิยม | อาร์เรย์ | popularCountries={['UA', 'EN']} | เสานี้ช่วยให้คุณสามารถส่งอาร์เรย์ประเทศยอดนิยมไปยัง ListHeaderComponent ของคุณ | |
| ListHeaderComponent | JSX.องค์ประกอบ | ListHeaderComponent={ListHeaderComponent} | อุปกรณ์ประกอบฉากนี้ช่วยให้คุณสร้างองค์ประกอบส่วนหัวเพื่อแสดงประเทศยอดนิยมที่ด้านบนของรายการได้! ตรวจสอบส่วนตัวอย่างด้วย ListHeaderComponent |
❕ นอกจากนี้ คุณยังสามารถใช้อุปกรณ์ประกอบฉาก FlatList และ TextInput อื่นๆ ทั้งหมดได้หากต้องการ
< 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"
} ,คุณสามารถเพิ่มภาษาของคุณ ถ้าคุณต้องการ !!! แต่หลังจากนั้นช่วยประชาสัมพันธ์หน่อยนะครับจะได้ช่วยเหลือคนอื่นได้
หากคุณใช้แพ็คเกจนี้และต้องการกำหนดเป้าหมายองค์ประกอบใดองค์ประกอบหนึ่งในการทดสอบอัตโนมัติ ขณะนี้เรามี testID สำหรับองค์ประกอบต่อไปนี้:
FlatList ที่ห่อ: 'countryCodesPickerFlatList'TextInput การค้นหาประเทศ: 'countryCodesPickerSearchInput'TouchableOpacity ): 'countryCodesPickerCountryButton'
