react native dialogs

رد الفعل-ديالوجز

وحدة Android فقط لحوار تصميم المواد. هذا غلاف على Afollestad/Material-Dialogs. تم تصميم هذه الوحدة لنظام Android فقط بدون خطط لدعم iOS.

جدول المحتويات

• تثبيت
  • الربط اليدوي
• الاستخدام
• API
  • ملكيات
    • defaults
    • actionDismiss
    • actionNegative
    • actionNeutral
    • actionPositive
    • listPlain
    • listRadio
    • listCheckbox
    • progressHorizontal
  • طُرق
    • alert
    • assignDefaults
    • dismiss
    • prompt
    • showPicker
    • showProgress
• الأنواع
  • الأنواع الداخلية
    • type ActionType
    • type ListItem
    • type ListType
    • type OptionsAlert
    • type OptionsCommon
    • type OptionsProgress
    • type OptionsPicker
    • type OptionsPrompt
    • type ProgressStyle
• أمثلة
  • مربع الحوار التقدم
  • القائمة الأساسية
  • قائمة الراديو
    • دون التقشير التلقائي
  • قائمة المراجعة
    • مع زر قائمة واضحة
  • اِسْتَدْعَى
  • HTML
  • تعيين Defaults
• المساهمين

تثبيت

1. ثَبَّتَ:

   • باستخدام NPM: npm install react-native-dialogs --save
   • باستخدام الغزل: yarn add react-native-dialogs

2. وصلة:

   • react-native link react-native-dialogs
   • أو إذا فشل هذا ، ارتباط باستخدام هذه الخطوات يدويًا

3. ترجمة التطبيق باستخدام react-native run-android

الربط اليدوي

اتبع هذه الخطوات في حالة فشل الارتباط التلقائي ( react-native link ).

1. في android/app/build.gradle ، أضف التبعية إلى تنشيطك:

    dependencies {
       ...
       compile project(':react-native-dialogs') // Add this
   }
   

2. في android/build.gradle ، يجب أن يكون هناك بالفعل ، ولكن في حال لم يكن الأمر كذلك ، أضف مستودع Jitpack Maven لتنزيل المكتبة Afollestad/Material-Dialogs:

    allprojects {
       repositories {
           ...
           jcenter() // Add this if it is not already here
           ...
       }
   }
   

3. في android/settings.gradle :

    rootProject.name = ...
   ...
   include ':react-native-dialogs' // Add this
   project(':react-native-dialogs').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-dialogs/android') // Add this
   
   ...
   include ':app'
   

4. استيراد وإضافة الحزمة ، في android/app/src/main/.../MainApplication.java :

   ...
   import android . app . Application ;
   ...
   
   import com . aakashns . reactnativedialogs . ReactNativeDialogsPackage ; // Add new import
   
   ...
   
   public class MainApplication extends Application implements ReactApplication {
     ...
     @ Override
     protected List < ReactPackage > getPackages () {
       return Arrays .< ReactPackage > asList (
         new MainReactPackage (),
         ...
         new ReactNativeDialogsPackage () // Add the package here
       );
     }
   }

الاستخدام

1. استيراده في JS الخاص بك:

    import DialogAndroid from 'react-native-dialogs' ;

2. استدعاء API:

    class Blah extends Component {
       render ( ) {
           return < Button title = "Show DialogAndroid" onPress = { this . showDialogAndroid } />
       }
   
       showDialogAndroid = async ( ) => {
           const { action } = await DialogAndroid . alert ( 'Title' , 'Message' ) ;
           switch ( action ) {
               case DialogAndroid . actionPositive :
                   console . log ( 'positive!' )
                   break ;
               case DialogAndroid . actionNegative :
                   console . log ( 'negative!' )
                   break ;
               case DialogAndroid . actionNeutral :
                   console . log ( 'neutral!' )
                   break ;
               case DialogAndroid . actionDismiss :
                   console . log ( 'dismissed!' )
                   break ;
           }
       }
   }

API

ملكيات

defaults

{positivetext: 'ok'}

الخيارات الافتراضية لاستخدامها في جميع الطرق. لتعديل هذا ، إما معالجة مباشرة مع DialogAndroid.defaults = { ... } أو استخدم assignDefaults

actionDismiss

static actiondismiss = "ActionDismiss"

actionNegative

ActionNegative = "ActionNegable"

actionNeutral

static actionneUtral = "ActionneUtral"

actionPositive

acticepositive = "ActionPositive"

listPlain

static listplain = "listplain"

listRadio

ثابت Listradio = "Listradio"

listCheckbox

static ListCheckbox = "ListCheckbox"

progressHorizontal

progresshorizontal = "ProgressHorizontal"

طُرق

alert

 static alert(
    title: Title,
    content: Content,
    options: OptionsAlert
): Promise<
    {| action: "actionDismiss" | "actionNegative" | "actionNeutral" | "actionPositive" |} |
    {| action: "actionDismiss" | "actionNegative" | "actionNeutral" | "actionPositive", checked: boolean |}
>

يظهر مربع حوار.

المعلمة	يكتب	تقصير	مطلوب	وصف
عنوان	string, null, void			عنوان الحوار
محتوى	string, null, void			رسالة الحوار
خيارات	OptionsAlert			انظر OptionsAlert

assignDefaults

 static assignDefaults({
    [string]: value
): void

قم بتعيين ألوان افتراضية على سبيل المثال ، لذلك ليس عليك تقديمها في كل مكالمة طريقة.

{positivetext: 'ok'}

dismiss

 static dismiss(): void

يخفي حوار عرض حاليا.

prompt

 static prompt(
    title?: null | string,
    content?: null | string,
    options: OptionsPrompt
): Promise<
    {| action: "actionNegative" | "actionNeutral" | "actionDismiss" |} |
    {| action: "actionNegative" | "actionNeutral", checked: boolean |} |
    {| action: "actionPositive", text: string |} |
    {| action: "actionPositive", text: string, checked: boolean |}
>

يعرض مربع حوار مع حقل إدخال نص.

المعلمة	يكتب	تقصير	مطلوب	وصف
عنوان	string, null, void			عنوان الحوار
محتوى	string, null, void			رسالة الحوار
خيارات	OptionsPrompt			انظر OptionsPrompt

showPicker

 static showPicker(
    title?: null | string,
    content?: null | string,
    options: OptionsPicker
): Promise<
    {| action: "actionNegative" | "actionNeutral" | "actionDismiss" |} |
    {| action: "actionNegative" | "actionNeutral" | "actionDismiss", checked: boolean |} |
    {| action: "actionSelect", selectedItem: ListItem |} |
    {| action: "actionSelect", selectedItem: ListItem, checked: boolean |} |
    {| action: "actionSelect", selectedItems: ListItem[] |} |
    {| action: "actionSelect", selectedItems: ListItem[], checked: boolean |}
>

يظهر تنبيهًا منتظمًا ، ولكن أيضًا مع العناصر التي يمكن تحديدها.

المعلمة	يكتب	تقصير	مطلوب	وصف
عنوان	string, null, void			عنوان الحوار
محتوى	string, null, void			رسالة الحوار
خيارات	OptionsPicker			انظر OptionsPrompt

showProgress

 static showProgress(
    content?: null | string,
    options: OptionsProgress
): Promise<{| action:"actionDismiss" |}>

يظهر مربع حوار التقدم. بشكل افتراضي ، لا يتم عرض أزرار ، ولا يغلقه زر استرداد الأجهزة. يجب أن تغلقها باستخدام DialogAndroid.dismiss() .

المعلمة	يكتب	تقصير	مطلوب	وصف
محتوى	string, null, void			رسالة الحوار
خيارات	OptionsProgress			انظر OptionsPrompt

الأنواع

يستخدم التدفق كنظام الكتابة.

الأنواع الداخلية

type ActionType

 "actionDismiss" | "actionNegative" | "actionNeutral" | "actionPositive" | "actionSelect"

type ListItem

 { label:string } | { label:string, id:any } | {}

ملحوظات

• إذا لم يكن مفتاح label موجودًا ، فحدد المفتاح الذي يجب استخدامه كتسمية مع خاصية labelKey الخاصة بـ OptionsPicker .
• id مطلوب فقط إذا كان selectedIds selectedId
  • إذا لم يكن مفتاح id موجودًا ، فحدد المفتاح الذي يجب استخدامه كمعرف مع خاصية idKey لـ OptionsPicker .

type ListType

 "listCheckbox" | "listPlain" | "listRadio"

type OptionsAlert

 {
    ...OptionsCommon
}

مفتاح	يكتب	تقصير	مطلوب	وصف
... OptionScommon	OptionsCommon			انظر OptionsCommon

type OptionsCommon

 {
    cancelable?: boolean,
    checkboxDefaultValue?: boolean
    checkboxLabel?: string,
    content?: string,
    contentColor?: string,
    contentIsHtml?: boolean,
    forceStacking?: boolean,
    linkColor?: ColorValue,
    negativeColor?: ColorValue,
    negativeText?: string,
    neutralColor?: ColorValue,
    neutralText?: string,
    positiveColor?: ColorValue,
    positiveText?: string, // default "OK"
    backgroundColor?: ColorValue,
    title?: string,
    titleColor?: ColorValue,
}

مفتاح	يكتب	تقصير	مطلوب	وصف
قابل للإلغاء	boolean			إذا كان النقر خارج منطقة الحوار ، أو زر إعادة الأجهزة ، يجب أن يرفض الحوار.
checkboxdefaultValue	boolean	false		الحالة الأولية لمربع الاختيار. لا شيء إذا لم يتم تعيين checkboxLabel .
checkboxlabel	string			إذا تم تعيينها ، فهناك مربع اختيار يظهر في أسفل الحوار مع هذا التسمية
محتوى	string			رسالة الحوار
ContentColor	ColorValue			لون رسالة الحوار
contentishtml	boolean			إذا كان يجب تحليل رسالة الحوار كـ HTML. (تشمل العلامات المدعومة: <a> ، <img> ، إلخ)
forcestacking	boolean			إذا كان لديك أزرار عمل متعددة تكون واسعة جدًا بحيث لا تتناسب مع سطر واحد ، فسيتم ترسيخ الحوار من الأزرار لتكون موجهة رأسياً.
LinkColor	ColorValue			إذا كان contentIsHtml صحيحًا ، ويحتوي content على علامات <a> ، يتم تلوينها بهذا اللون
NegativeColor	ColorValue
negativetext	string			إذا لم يتم عرض الزر.
NeutralColor	ColorValue
نص محايد	string			يظهر زر في أقصى اليسار مع هذه السلسلة كعلامة. إذا لم يتم عرض الزر.
positivecolor	ColorValue
positivetext	string			إذا لم يتم عرض الزر.
BackgroundColor	ColorValue
عنوان	string			عنوان الحوار
TitleColor	ColorValue			لون العنوان

type OptionsProgress

 {
    contentColor: $PropertyType<OptionsCommon, 'contentColor'>,
    contentIsHtml: $PropertyType<OptionsCommon, 'contentIsHtml'>,
    linkColor: $PropertyType<OptionsCommon, 'linkColor'>,
    style?: ProgressStyle,
    title: $PropertyType<OptionsCommon, 'title'>,
    titleColor: $PropertyType<OptionsCommon, 'titleColor'>',
    widgetColor: $PropertyType<OptionsCommon, 'widgetColor'>
}

مفتاح	يكتب	تقصير	مطلوب	وصف
ContentColor	OptionsCommon#contentColor			انظر OptionsCommon#contentColor
contentishtml	OptionsCommon#contentIsHtml			انظر OptionsCommon#contentIsHtml
LinkColor	OptionsCommon#linkColor			انظر OptionsCommon#linkColor
أسلوب	ProgressStyle			انظر ProgressStyle
عنوان	OptionsCommon#title			انظر OptionsCommon#title
TitleColor	OptionsCommon#titleColor			انظر OptionsCommon#titleColor
WidgetColor	ColorValue			مؤشر لون التقدم

type OptionsPicker

{| ... OptionScommon ، type؟: typeof listtype.listplain ، maxnumberofitems؟: number ، items: listItemJustlabel [] ، |} | {| ... OptionScommon ، type؟: typeof listtype.listplain ، maxnumberofitems؟: number ، items: listItemBare [] ، label key: string |} | {| // Radio - لا تم تحديد مسبق ... OptionScommon ، النوع: typeof listtype.listradio ، widgetColor ؟: colorvalue // العناصر الملونة الراديو: ListItemJustlabel [] ، |} | {| // Radio - لا تم تحديدها ... OptionScommon ، النوع: typeof listtype.listradio ، widgetColor ؟: colorvalue // العناصر الملونة الراديو: ListItemBare [] ، labelkey: string |} | {| // Radio - preselected - ListItemfull ... OptionScommon ، النوع: typeof listtype.listradio ، widgetcolor ؟: colorvalue // radio color عناصر: ListItemfull [] ، selectid: any |} | {| // Radio - preselected - ListItemJustlabel ... OptionScommon ، النوع: typeof listtype.listradio ، widgetcolor ؟: colorvalue // styp stems: listItemjustlabel [] ، idkey: string ، anteried: any |} | {| // Radio - preselected - ListItemJustId ... OptionScommon ، النوع: typeof listtype.listradio ، widgetcolor ؟: colorvalue // Radio Color stems: ListItemJustId [] ، labelkey: string ، any |} | {| // Radio - preselected - ListItemBare ... OptionScommon ، النوع: typeof listtype.listradio ، widgetcolor ؟: colorValue // Radio Color Conshs: ListItemBare [] ، idkey: string ، labelkey: string ، selectid: any |} | {| // قائمة المراجعة - لا تم تحديدها - ListItemJustlabel ... OptionScommon ، النوع: Typeof Listtype.ListCheckbox ، NeutralIsclear ؟: Boolean ، WidgetColor ؟: ColorValue ، // checkbox color items: listItemJustlabel [] |} | {| // قائمة المراجعة - لا تم تحديدها - ListItemBare ... OptionScommon ، النوع: Typeof Listtype.ListCheckbox ، NeutralisClear؟: Boolean ، WidgetColor ؟: ColorValue ، // مربعات الاختيار عناصر اللون: ListItemBare [] ، Labelkey: string |} | {| // قائمة مرجعية - preselected - ListItemfull ... OptionScommon ، النوع: typeof listtype.listcheckbox ، neutralisclear ؟: boolean ، widgetcolor ؟: colorvalue ، // مربع الاختيار عناصر اللون: ListItemfull [] ، selectids: اي [] |} | {| // قائمة المراجعة - preselected - ListItemJustlabel ... OptionScommon ، النوع: typeof listtype.listcheckbox ، neutralisclear ؟: boolean ، widgetcolor ؟: colorvalue ، // checkbox color عناصر: ListItemJustlabel [] ، idkey: string ، aned: any |} {| // قائمة المراجعة - preselected - ListItemJustId ... OptionScommon ، النوع: typeof listtype.listcheckbox ، neutralisclear ؟: boolean ، widgetcolor ؟: colorvalue ، // chickbox color stems: listItemJustId [] ، labelkey: string ، anedids: any |} | {| // قائمة المراجعة - preselected - ListItemBare ... OptionScommon ، النوع: typeof listtype.listcheckbox ، neutralisclear؟: boolean ، widgetcolor؟: colorvalue ، // مربع الاختيار عناصر اللون: listItemBare [] ، idkey: string ، labelkey: string ، selectids: اي |}

مفتاح	يكتب	تقصير	مطلوب	وصف
OptionScommon	OptionsCommon			انظر OptionsCommon
idkey	string	"بطاقة تعريف"
أغراض	ListItem []		نعم	انظر ListItem
مفتاح الملصقات	string	"ملصق"
maxnumberofitems	number			إذا كنت ترغب في تعيين كمية كحد أقصى من العناصر المرئية في القائمة
محايدة	boolean			يؤدي الضغط على الزر المحايد إلى إغلاق مربع الحوار وتكون selectedItems صفيفًا فارغًا. يعمل فقط إذا تم توفير neutralText .
SelectionId	any			سيتم اختيار الراديو المعني في عرض الحوار. إذا لم يتم العثور على مثل هذا الهوية ، فلا يتم تحديد أي شيء. ينطبق فقط إذا كان type هو DialogAndroid.listRadio . يتطلب أن تحتوي items[] على مفتاح وصفه idKey .
المختارين	any[]			سيتم تحديد مربع الاختيار المعني في برنامج الحوار. إذا لم يتم العثور على مثل هذا الهوية ، فلا يتم اختيار شيء لهذا المعرف. ينطبق فقط إذا كان type هو DialogAndroid.listCheckbox . يتطلب أن تحتوي items[] على مفتاح وصفه idKey .
يكتب	ListType	DialogAndroid.listPlain		انظر ListType
WidgetColor	ColorValue			لون الراديو أو مربع الاختيار

type OptionsPrompt

 {
    ...OptionsCommon,
    keyboardType?:
      | 'numeric'
      | 'number-pad'
      | 'numeric-password'
      | 'decimal-pad'
      | 'email-address'
      | 'password'
      | 'phone-pad'
      | 'url',
    defaultValue?: string,
    placeholder?: string,
    allowEmptyInput?: boolean,
    minLength?: number,
    maxLength?: number,
    widgetColor?: ColorValue
}

مفتاح	يكتب	تقصير	مطلوب	وصف
OptionScommon	OptionsCommon			انظر OptionsCommon
WidgetColor	ColorValue			لون الحقل السطحي والمؤشر

type ProgressStyle

 "progressHorizontal"

أمثلة

لمشاهدة الأمثلة التي يتم إعادة تشغيلها باستخدام checkboxLabel ، شاهد هذا PR - Github :: Aakashns/React -Dialogs - #86

مربع الحوار التقدم

 DialogAndroid . showProgress ( 'Downloading...' , {
    style : DialogAndroid . progressHorizontal // omit this to get circular
} ) ;
setTimeout ( DialogAndroid . dismiss , 5000 ) ; 

القائمة الأساسية

 const { selectedItem } = await DialogAndroid . showPicker ( 'Pick a fruit' , null , {
    items : [
        { label : 'Apple' , id : 'apple' } ,
        { label : 'Orange' , id : 'orange' } ,
        { label : 'Pear' , id : 'pear' }
    ]
} ) ;
if ( selectedItem ) {
    // when negative button is clicked, selectedItem is not present, so it doesn't get here
    console . log ( 'You selected item:' , selectedItem ) ;
} 

قائمة الراديو

قم بتعيين positiveText على null من السلوك التلقائي للضغط على عنصر زر الراديو.

 const { selectedItem } = await DialogAndroid . showPicker ( 'Pick a fruit' , null , {
    // positiveText: null, // if positiveText is null, then on select of item, it dismisses dialog
    negativeText : 'Cancel' ,
    type : DialogAndroid . listRadio ,
    selectedId : 'apple' ,
    items : [
        { label : 'Apple' , id : 'apple' } ,
        { label : 'Orange' , id : 'orange' } ,
        { label : 'Pear' , id : 'pear' }
    ]
} ) ;
if ( selectedItem ) {
    // when negative button is clicked, selectedItem is not present, so it doesn't get here
    console . log ( 'You picked:' , selectedItem ) ;
} 

دون التقشير التلقائي

هنا نمر في سلسلة إلى positiveText ، وهذا يمنع dismiss التلقائي على اختيار عنصر الراديو.

 const { selectedItem } = await DialogAndroid . showPicker ( 'Pick a fruit' , null , {
    positiveText : 'OK' , // this is what makes disables auto dismiss
    negativeText : 'Cancel' ,
    type : DialogAndroid . listRadio ,
    selectedId : 'apple' ,
    items : [
        { label : 'Apple' , id : 'apple' } ,
        { label : 'Orange' , id : 'orange' } ,
        { label : 'Pear' , id : 'pear' }
    ]
} ) ;
if ( selectedItem ) {
    // when negative button is clicked, selectedItem is not present, so it doesn't get here
    console . log ( 'You picked:' , selectedItem ) ;
} 

قائمة المراجعة

 const { selectedItems } = await DialogAndroid . showPicker ( 'Select multiple fruits' , null , {
    type : DialogAndroid . listCheckbox ,
    selectedIds : [ 'apple' , 'orange' ] ,
    items : [
        { label : 'Apple' , id : 'apple' } ,
        { label : 'Orange' , id : 'orange' } ,
        { label : 'Pear' , id : 'pear' }
    ]
} ) ;
if ( selectedItems ) {
    if ( ! selectedItems . length ) {
        console . log ( 'You selected no items.' ) ;
    } else {
        console . log ( 'You selected items:' , selectedItems ) ;
    }
} 

مع زر قائمة واضحة

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

 const { selectedItems } = await DialogAndroid . showPicker ( 'Select multiple fruits' , null , {
    type : DialogAndroid . listCheckbox ,
    selectedIds : [ 'apple' , 'orange' ] ,
    neutralIsClear : true , /////// added this
    neutralText : 'Clear' , /////// added this
    items : [
        { label : 'Apple' , id : 'apple' } ,
        { label : 'Orange' , id : 'orange' } ,
        { label : 'Pear' , id : 'pear' }
    ]
} ) ;
if ( selectedItems ) {
    if ( ! selectedItems . length ) {
        console . log ( 'You selected no items.' ) ;
    } else {
        console . log ( 'You selected items:' , selectedItems ) ;
    }
} 

اِسْتَدْعَى

 const { action , text } = await DialogAndroid . prompt ( 'Title - optional' , 'Message - optional' ) ;
if ( action === DialogAndroid . actionPositive ) {
    console . log ( `You submitted: " ${ text } "` ) ;
} 

HTML

 DialogAndroid . alert ( 'Title' , `This is a link <a href="https://www.duckduckgo.com/">DuckDuckGo</a>` , {
    contentIsHtml : true
} ) ; 

تعيين Defaults

يمكنك تعيين بعض الإعدادات الافتراضية حتى لا تضطر إلى تغييره في كل مرة.

 DialogAndroid . assignDefaults ( {
    title : 'Default Title' ,
    positiveText : null ,
    contentColor : 'rgba(0, 0, 0, 0.2)' ,
    widgetColor : 'blue'
} )

الآن في أي وقت تقوم فيه بحذف أو تمر undefined إلى contentColor أو widgetColor أو title ، فإنه سيستخدم الافتراضات التي قمنا بتعيينها هنا.

 DialogAndroid . alert ( undefined , 'message here' )

سيعرض هذا العنوان "العنوان الافتراضي" ، مع عدم وجود زر إيجابي ، وسيكون لون الرسالة أسود بنسبة 20 ٪. إذا قمت Dialog.showProgress ، سيكون مؤشر التقدم أزرق. إلخ.

المساهمين

شكراً لهؤلاء الأشخاص الرائعين (مفتاح الرموز التعبيرية):

vojtech نوفاك ؟ ؟	Noitidart ؟	أليسون كارفالهو	أنتوني أو	آشلي وايت	نحلة	بريانسو
بايرون وانغ	فرزاد عبدهوسيني	جيفري غوه ؟	غوستافو فالفاسوري ؟	هنريك	Heydabop	هوانغ يو
Iragne	جانيك ديبليسيس	Jeffchienzabinet	جيريمي داغورن	جيكون	Mattias Pfeiffer	Pureday
راديك czemerys	ريكاردو فوهرمان	روس	فينيسيوس زاراميلا

يتبع هذا المشروع مواصفات جميع المساهمين. مساهمات من أي نوع ترحيب!