首頁>編程相關>其他源碼
下載

反應原理

僅用於材料設計對話的Android模塊。這是對Afollestad/材料劃分的包裝紙。該模塊是為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
  • 例子
    • 進度對話
    • 基本列表
    • 無線電列表
      • 沒有自動-Dismiss
    • 清單
      • 使用清除列表按鈕
    • 迅速的
    • html
    • sigsdDefaults
  • 貢獻者

安裝

  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

{potitiveText：'ok'}

所有方法要使用的默認選項。為了修改此問題，要么直接用DialogAndroid.defaults = { ... }進行操作，要么使用assignDefaults

actionDismiss

靜態ActionDismiss =“ ActionDismiss”

actionNegative

靜態動作觸覺=“動作不關”

actionNeutral

靜態動作nutral =“ Action Neutral”

actionPositive

靜態動作陽性=“ Action -Prodistive”

listPlain

靜態listPlain =“ listplain”

listRadio

靜態listradio =“ listradio”

listCheckbox

靜態ListCheckbox =“ ListCheckbox”

progressHorizontal

靜態progresshorizo​​ntal =“ progresshorizo​​ntal”

方法

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

例如，設置默認顏色，因此您不必在每個方法調用上提供它。

{potitiveText：'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密鑰，請指定具有OptionsPicker的labelKey屬性的標籤。
  • 僅當需要使用selectedId / selectedIds時，才需要id 。
    • 如果不存在id密鑰，請指定應將哪個鍵用作OptionsPicker的idKey屬性的ID。
type ListType
 "listCheckbox" | "listPlain" | "listRadio"
type OptionsAlert
 {
    ...OptionsCommon
}
鑰匙類型預設必需的描述
... options common 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>等）
反對boolean如果您有多個操作按鈕，這些按鈕太寬而無法放在一行上，則對話框將堆疊要垂直面向的按鈕。
LinkColor ColorValue如果contentIsHtml為true，並且content包含<a>標籤，則這些顏色為
負面的ColorValue
NegativeText string如果虛假，則未顯示按鈕。
中性顏色ColorValue
中性文本string在最左側顯示該字符串作為標籤。如果虛假，則未顯示按鈕。
potitiveColor ColorValue
potitivetext string如果虛假，則未顯示按鈕。
背景色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

{| ... options common，type？ ：typeof listType.listplain，maxNumberofitems？ ：編號，項目：listitemjustlabel []，|} | {| ... options common，type？ ：typeof listType.listplain，maxNumberofitems？ ：編號，項目：listitembare []，labelkey：string |} | {| //廣播 - 沒有預選的...選項common，類型：typeof listType.listradio，widgetColor？ ：colorValue //無線電顏色項目：listitemjustlabel []，|} | {| //廣播 - 沒有預選...選項common，類型：typeof listType.listradio，widgetColor？ ：colorValue //無線電顏色項目：listitembare []，labelkey：string |} | {| //廣播 - 預選 - listItemfull ... optionsCommon，類型：typeof listType.listradio，widgetColor？ ：colorValue //無線電顏色項目：listItemfull []，SelectedID：任何|} | {| //廣播 - 預選 - listItemJustlabel ... optionsCommon，類型：typeof listType.listradio，widgetColor？ ：colorValue //無線電顏色項目：listItemjustlabel []，idkey []，idkey：string：string，selectedID，selectedingID：nocy |} | nose |} | {| //廣播 - 預選 - listItemJustid ... optionsCommon，類型：typeof listType.listradio，widgetColor？ ：colorValue //無線電顏色項目：listItemJustid []，labelkey：string，string，selectedid，selectedID：nocy |} | {| //廣播 - 預選 - listItembare ... optionsCommon，類型：typeof listType.listradio，widgetColor？ ：colorValue //無線電顏色項目：listitembare []，idkey []，idkey：string，labelkey：string，string：string，selectedid，selectedID：任何|} |任何|} | {| //清單 - 無預選 - listItemJustlabel ... optionsCommon，類型：type of listType.listCheckbox，NeutralisClear？ ：boolean，widgetColor？ ：colorValue，// ColorVbox顏色項目：listitemjustlabel [listitemjustlabel [] {| //清單 - 無預選 - listItembare ... optionsCommon，類型：typeof listType.listCheckbox，中intralisclear？ ：boolean，widgetColor？ ：colorValue，// colorvbox顏色，複選框顏色項目：listItembare [] {| // checklist - preselected - ListItemFull ...OptionsCommon, type: typeof ListType.listCheckbox, neutralIsClear?: boolean, widgetColor?: ColorValue, // checkbox color items: ListItemFull[], selectedIds: any[] |} | {| //清單 - 預選 - listItemJustlabel ... optionsCommon，類型：type of listType.listCheckbox，中式插曲？ ：布爾值，widgetColor？ ：colorValue，// colorvbox顏色，listitemjustlabel [listitemjustlabel [] {| //清單 - 預選 - listItemJustid ... optionsCommon，類型：typeof listType.listCheckbox，中式插圖？ ：布爾值，widgetColor？ ：colorValue，// colorvbox顏色，複選框顏色項目：listItemJustid [] {| //清單 - 預選 - listItembare ... optionsCommon，類型：typeof listType.listCheckbox，NetralisClear？ ：Boolean，Boolean，WidgetColor？ ：colorValue，// ColorVbox，Checkbox顏色，listItembare []，listItembare []，idkey：idkey：idkey：didkey：didkey：string，labelkey：string，selectionIds：string，selectedids：noy | nose | whore | nose |}：

鑰匙類型預設必需的描述
optionsCommon OptionsCommon請參閱OptionsCommon
idkey string “ID”
專案ListItem []是的請參閱ListItem
labelkey string “標籤”
maxnumberofitems number如果您想在列表中設置最大數量可見的項目
中額捕集boolean按下中性按鈕會導致對話框關閉，而selectedItems為空數組。僅當還提供neutralText時才有效。
SelectedID any各自的收音機將在對話顯示上選擇。如果找不到這樣的ID，那麼什麼也不會選擇。僅當type是DialogAndroid.listRadio時才適用。要求該items[]包含idKey描述的密鑰。
SelectedID any[]各自的複選框將在對話框顯示上選擇。如果找不到這樣的ID，則該ID沒有選擇。僅當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重做的示例

進度對話

 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 ，以在單選按鈕項目的按下自動dismiss行為。 

 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 ) ;
}
沒有自動-Dismiss

在這裡，我們將字符串傳遞到positiveText ，這可以防止選擇無線電項目的自動障礙。 

 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
} ) ;

sigsdDefaults

您可以設置一些默認設置，因此您不必每次都更改它。 

 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 。 ETC。

貢獻者

謝謝這些好人（表情符號鑰匙）：


Vojtech Novak
？ ？
noitidart
？
Alisson Carvalho

安東尼·奧

阿什利·懷特（Ashley White）

蜜蜂

布萊恩索

拜倫·王

法爾扎德·阿卜杜勒霍斯尼

杰弗裡·戈
？
GustavoFãoValvassori
？
亨里克

heydabop

黃Yu

伊拉格

Janic Duplessis

Jeffchienzabinet

傑里米·達戈恩（Jeremy Dagorn）

jykun

Mattias Pfeiffer

純淨

Radek Czemerys

Ricardo Fuhrmann

羅斯

Vinicius Zaramella

該項目遵循全企業規範。歡迎任何形式的貢獻！

展開
附加信息
相關應用
爲您推薦
相關資訊 全部