react native country codes picker

منتقي رموز الدول الأصلية

⚡ ⚡ ⚡ هذا الليب. توفير لغات متعددة. منتقي البلد أو قائمة البلدان مع وظيفة البحث. منصة مشتركة بالكامل ومدعومة على React-native وexpo. لم تجد بلدك؟ ما عليك سوى إضافة البلدان أو المناطق المحلية المطلوبة وإجراء العلاقات العامة. ⚡ ⚡ ⚡

❗ قبل أن تبدأ! ❗

إنني أتطلع إلى تحسين هذه المكتبة وأحب أن أسمع أفكارك حول الميزات التي ترغب في رؤيتها في الإصدار التالي. أقوم حاليًا بصياغة خارطة طريق للإصدار القادم من منتقي رموز الدول التفاعلية.

مع الأخذ في الاعتبار ما إذا كان الإصدار التالي يجب أن يعتمد على الإصدار 3 المعاد تنشيطه لتحسين الأداء أو ما إذا كان من الأفضل تقديم ربط مرن بدلاً من مكون جديد. تعتبر مدخلاتك حاسمة في توجيه عملية التطوير، لذا يرجى مشاركة أفكارك حول الإضافات أو التغييرات الأكثر قيمة التي ترغب في رؤيتها.

قريباً ؟

1. عرض إدخال البحث المخصص.
2. تحديث/تحسين المستندات للحصول على أفضل تجربة للمستخدم.
3. تحسينات الرسوم المتحركة.

إذا كان لديك شيء مثير للاهتمام! فقط اكتب لنا :)

❕ التثبيت ❕

المعرض: 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.

دعم	يكتب	تقصير	مثال	وصف
يعرض	منطقية			تستخدم هذه الدعامة لعرض المشروط. ضع حالة العرض الخاصة بك هنا.
PickerButtonOnPress	وظيفة		(البلد) => setCode(country.dial_code)	ضع وظيفتك/وظائفك هنا للحصول على بيانات الدولة من المنتقي.
inputPlaceholder	خيط		inputPlaceholder={'العنصر النائب الخاص بك'}	إذا كنت بحاجة إلى عنصر نائب مخصص لمدخلاتك، فقد تحتاج إلى هذه الدعامة.
searchMessage	خيط		searchMessage={'بعض رسائل البحث هنا'}	إذا كنت تريد تخصيص رسالة البحث، فما عليك سوى استخدام هذه الدعامة.
لانج	خيط	"أون"	لانج = {'رر'}	إذا كنت بحاجة إلى تغيير اللغة. فقط ضع واحدة من اللغات المدعومة. أو إذا لم تجد اللغة المطلوبة، فما عليك سوى إضافتها وإجراء علاقة عامة :)
EnableModalAvoiding	منطقية	خطأ شنيع	تمكينModalAvoiding={صحيح}	هل يجب على المشروط تجنب لوحة المفاتيح؟ على نظام Android للعمل، يلزم استخدامه مع androidWindowSoftInputMode مع القيمة عمومًا، افتراضيًا، سيتجنب android لوحة المفاتيح بمفردها
androidWindowSoftInputMode	خيط		androidWindowSoftInputMode={'pan'}	يتجنب نظام Android الأساسي لوحة المفاتيح بمفردها، إذا كنت تريد استخدام تجنب مخصص، فيمكنك استخدام هذه الدعامة
itemTemplate	ReactNode	زر البلد	itemTemplate={YourTemplateComponentsHere}	تحصل هذه المعلمة على عنصر React Node لعرضه كقالب لكل عنصر في القائمة. يتم إرسال هذه الخصائص إلى العنصر: المفتاح والعنصر والنمط والاسم وonPress
أسلوب	هدف		النمط={{yoursStylesHere}}	إذا كنت تريد تغيير أنماط المكون، فربما تحتاج إلى هذه الدعائم. يمكنك التحقق من جزء التصميم أدناه.
this.disableBackdrop	منطقية	خطأ شنيع	this.disableBackdrop	إذا كنت لا تريد إظهار الخلفية المشروطة، قم بتمرير هذه الدعامة.
onBackdropPress	وظيفة	باطل	onBackdropPress={() => setShow(false)}	إذا كنت تريد إغلاق الوسائط عندما ينقر المستخدم على الخلفية المشروطة.
initialState	خيط		الحالة الأولية = {'+380'}	في بعض الأحيان تحتاج إلى تحديد البلد مسبقًا على سبيل المثال من خلال الموقع الحالي للمستخدم حتى تتمكن من استخدام هذه الدعامة.
excludedCountrys	صفيف		البلدان المستبعدة={['RU', 'BY']}	في هذه الدعامة، يمكنك تحديد قائمة البلدان التي تريد إزالتها عن طريق إضافة رموزها.
showOnly	صفيف		showOnly={['UA', 'EN']}	تسمح لك هذه الدعامة بتكوين البلدان التي تريد عرضها.
PopularCountry	صفيف		PopularCountries={['UA', 'EN']}	تتيح لك هذه الدعامة إرسال مصفوفة البلدان الشائعة إلى ListHeaderComponent الخاص بك.
ListHeaderComponent	JSX.Element		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'