首页>编程相关>其他源码
下载

反应原理

仅用于材料设计对话的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

该项目遵循全企业规范。欢迎任何形式的贡献！

展开
附加信息
相关应用
为您推荐
相关资讯 全部