Página Inicial>Relacionado com a programação>Outro código-fonte
Baixar

react-native-dialogs

Um módulo Android apenas para diálogos de design de material. Este é um invólucro sobre o Afolestad/Material-Dialogs. Este módulo foi projetado para Android apenas sem planos para apoiar o iOS.

Índice

  • Instalação
    • Ligação manual
  • Uso
  • API
    • Propriedades
      • defaults
      • actionDismiss
      • actionNegative
      • actionNeutral
      • actionPositive
      • listPlain
      • listRadio
      • listCheckbox
      • progressHorizontal
    • Métodos
      • alert
      • assignDefaults
      • dismiss
      • prompt
      • showPicker
      • showProgress
  • Tipos
    • Tipos internos
      • type ActionType
      • type ListItem
      • type ListType
      • type OptionsAlert
      • type OptionsCommon
      • type OptionsProgress
      • type OptionsPicker
      • type OptionsPrompt
      • type ProgressStyle
  • Exemplos
    • Diálogo de progresso
    • Lista básica
    • Lista de rádio
      • Sem discos automáticos
    • Lista de verificação
      • Com o botão de lista clara
    • Incitar
    • Html
    • atribuiDefaults
  • Colaboradores

Instalação

  1. Instalar:

    • Usando NPM: npm install react-native-dialogs --save
    • Usando fios: yarn add react-native-dialogs

  2. Link:

    • react-native link react-native-dialogs
    • Ou se isso falhar, vincular manualmente usando essas etapas

  3. Compilar aplicativo usando react-native run-android

Ligação manual

Siga estas etapas se a ligação automática ( react-native link ) falhou.

  1. No android/app/build.gradle , adicione a dependência à criação do seu aplicativo: 

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

  2. No android/build.gradle , ele já deveria estar lá, mas, caso não esteja, adicione o repositório Jitpack Maven para baixar a biblioteca Afollestad/Material-Dialogs: 

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

  3. In 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. Importar e adicionar pacote, no 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
    );
  }
}

Uso

  1. Importe -o em seu JS: 

     import DialogAndroid from 'react-native-dialogs' ;

  2. Ligue para a 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

Propriedades

defaults

{positiveText: 'ok'}

As opções padrão a serem usadas por todos os métodos. Para modificar isso, manipular diretamente com DialogAndroid.defaults = { ... } ou use assignDefaults

actionDismiss

estático actionDismiss = "ActionDismiss"

actionNegative

ação estáticanegativa = "actionnegative"

actionNeutral

static ActionNeutral = "ActionNeutral"

actionPositive

static ActionPositive = "ActionPositive"

listPlain

estático listplain = "listplain"

listRadio

estático listradio = "listradio"

listCheckbox

estático listcheckbox = "listcheckbox"

progressHorizontal

estático progresshorizontal = "ProgressHorizontal"

Métodos

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

Mostra uma caixa de diálogo.

Parâmetro Tipo Padrão Obrigatório Descrição
título string, null, void Título da caixa de diálogo
contente string, null, void Mensagem de diálogo
opções OptionsAlert Consulte OptionsAlert
assignDefaults
 static assignDefaults({
    [string]: value
): void

Defina as cores padrão, por exemplo, para que você não precise fornecer em todas as chamadas de método.

{positiveText: 'ok'}

dismiss
 static dismiss(): void

Esconde a caixa de diálogo atualmente mostrando.

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

Mostra uma caixa de diálogo com um campo de entrada de texto.

Parâmetro Tipo Padrão Obrigatório Descrição
título string, null, void Título da caixa de diálogo
contente string, null, void Mensagem de diálogo
opções OptionsPrompt Consulte 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 |}
>

Mostra um alerta regular, mas também com itens que podem ser selecionados.

Parâmetro Tipo Padrão Obrigatório Descrição
título string, null, void Título da caixa de diálogo
contente string, null, void Mensagem de diálogo
opções OptionsPicker Consulte OptionsPrompt
showProgress
 static showProgress(
    content?: null | string,
    options: OptionsProgress
): Promise<{| action:"actionDismiss" |}>

Mostra uma caixa de diálogo de progresso. Por padrão, nenhum botão é mostrado e o botão de volta do hardware não o fecha. Você deve fechá -lo com DialogAndroid.dismiss() .

Parâmetro Tipo Padrão Obrigatório Descrição
contente string, null, void Mensagem de diálogo
opções OptionsProgress Consulte OptionsPrompt

Tipos

O fluxo é usado como sistema de digitação.

Tipos internos

type ActionType
 "actionDismiss" | "actionNegative" | "actionNeutral" | "actionPositive" | "actionSelect"
type ListItem
 { label:string } | { label:string, id:any } | {}

Notas

  • Se a tecla label não existir, especifique qual chave deve ser usada como o rótulo com a propriedade labelKey do OptionsPicker .
  • id é necessário apenas se selectedId / selectedIds precisar ser usado.
    • Se a tecla id não existir, especifique qual chave deve ser usada como ID com a propriedade idKey do OptionsPicker .
type ListType
 "listCheckbox" | "listPlain" | "listRadio"
type OptionsAlert
 {
    ...OptionsCommon
}
Chave Tipo Padrão Obrigatório Descrição
... Optionscommon OptionsCommon Consulte 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,
}
Chave Tipo Padrão Obrigatório Descrição
cancelável boolean Se tocar fora da área de diálogo ou botão de volta de hardware, deve descartar a caixa de diálogo.
CHECKBOTDEFAULTVALUE boolean false O estado inicial da caixa de seleção. Não faz nada se checkboxLabel não estiver definida.
Checkboxlabel string Se definido, há uma caixa de seleção mostrada na parte inferior da caixa de diálogo com este rótulo
contente string Mensagem de diálogo
contentColor ColorValue Cor da mensagem de diálogo
contentishtml boolean Se a mensagem de diálogo deve ser analisada como HTML. (Tags suportadas incluem: <a> , <img> , etc)
forcestating boolean Se você tiver vários botões de ação que juntos são muito amplos para caber em uma linha, a caixa de diálogo empilhará os botões para serem orientados verticalmente.
LinkColor ColorValue Se contentIsHtml for verdadeiro e content contém tags <a> , elas são coloridas com esta cor
NegativeColor ColorValue
NegativeText string Se falsidade, o botão não é mostrado.
neutralcolor ColorValue
neutraltext string Mostra o botão da extrema esquerda com esta string como etiqueta. Se falsidade, o botão não é mostrado.
positivecolor ColorValue
positiveText string Se falsidade, o botão não é mostrado.
BackgroundColor ColorValue
título string Título da caixa de diálogo
titlecolor ColorValue Cor do título
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'>
}
Chave Tipo Padrão Obrigatório Descrição
contentColor OptionsCommon#contentColor Consulte OptionsCommon#contentColor
contentishtml OptionsCommon#contentIsHtml Consulte OptionsCommon#contentIsHtml
LinkColor OptionsCommon#linkColor Consulte OptionsCommon#linkColor
estilo ProgressStyle Veja ProgressStyle
título OptionsCommon#title Consulte OptionsCommon#title
titlecolor OptionsCommon#titleColor Consulte OptionsCommon#titleColor
widgetColor ColorValue Indicador de cor do progresso
type OptionsPicker

{| ... Optionscommon, tipo?: Typeof listtype.listplain, maxnumberofitems?: Número, itens: listItemJustLabel [], |} | {| ... Optionscommon, tipo?: Typeof listtype.listplain, maxNumberOfItems?: Número, itens: listItembare [], LabelKey: string |} | {| // Rádio - sem pré -selecionado ... Optionscommon, Tipo: Typeof listtype.listradio, widgetColor?: colorValue // Radio Color Itens: listItemJustLabel [], |} | {| // Rádio - Sem pré -selecionado ... Optionscommon, Tipo: Typeof listtype.listradio, widgetColor?: colorValue // Radio Color Itens: ListItemBare [], LabelKey: String |} | {| // Rádio - pré -selecionado - listItemfull ... OptionsCommon, tipo: tipoof listtype.listradio, widgetColor?: colorValue // itens de cor de rádio: listItemfull [], selectedId: qualquer |} | {| // Rádio - pré -selecionado - listItemJustLabel ... OptionsCommon, tipo: tipoof listtype.listradio, widgetColor?: colorValue // Radio Color Itens: listItemJustLabel [], IDKEY: String, SelectedId: Any |} | {| // Rádio - pré -selecionado - listItemJustID ... OptionsCommon, Tipo: Typeof listtype.listradio, widgetColor?: colorValue // Radio Color Itens: listItemJustID [], LabelKey: String, SelectedId: qualquer |} | {| // Rádio - pré -selecionado - ListItemBare ... OptionsCommon, Tipo: TIPOOF LISTTYPE.LISTRADIO, WidgetColor?: ColorValue // Radio Color Itens: ListItemBare [], IDKEY: String, LabelKey: String, SelectedId: Any |} | {| // Lista de verificação - sem pré -selecionados - listItemJustLabel ... OptionsCommon, tipo: tipoof listtype.listcheckbox, neutralisclear?: boolean, widgetColor?: colorValue, // itens de cores da caixa de seleção: listItemJustLabel [] |} | {| // Lista de verificação - sem pré -selecionados - ListItEMBare ... OptionsCommon, Tipo: TIPOOF LISTTYPE.LISTCHECKBOX, neutralIclear?: boolean, widgetColor?: colorValue, // itens de cor da caixa de seleção: listItembare [], Labelkey: string |} | {| // Lista de verificação - pré -selecionada - listItemfull ... OptionsCommon, tipo: tipoof listtype.listcheckbox, neutraliClear?: boolean, widgetColor?: colorValue, // itens coloridos da caixa de seleção: listitemfull [], selectedids: algum [] |} | {| // Lista de verificação - pré -selecionada - listItemJustLabel ... Optionscommon, tipo: tipoof listtype.listcheckBox, neutralisclear?: boolean, widgetcolor?: colorValue, // itens de cor da caixa de seleção: listitemJustLabel [], idkey: strings, selecionados: qualquer um |} | {| // Lista de verificação - pré -selecionada - listItemJustID ... OptionsCommon, TIPO: TIPOOF LISTTYPE.LISTCHECKBOX, neutralIclear?: boolean, widgetColor?: colorValue, // itens coloridos da caixa de seleção: listItemJustID [], LABELKEY: String, Selectedids: Any |} | {| // Lista de verificação - pré -selecionada - listItembare ... Optionscommon, tipo: tipoof listtype.listcheckbox, neutraliClear?: boolean, widgetColor?: colorValue, // itens coloridos de caixa de seleção: listitembare [], idkey: string, string: string, selecionedids: qualquer um |}

Chave Tipo Padrão Obrigatório Descrição
Optionscommon OptionsCommon Consulte OptionsCommon
idkey string "eu ia"
Unid ListItem [] Sim Veja ListItem
LabelKey string "rótulo"
maxNumberOfItems number Se você deseja definir uma quantidade máxima de itens visíveis em uma lista
NeutralIclear boolean Pressionar o botão neutro faz com que a caixa de diálogo seja fechada e selectedItems é uma matriz vazia. Funciona apenas se neutralText também for fornecido.
SelectedID any O respectivo rádio será selecionado no programa de diálogo. Se nenhum ID é encontrado, nada será selecionado. Somente aplicável se type for DialogAndroid.listRadio . Requer que items[] contenham a chave descrita pelo idKey .
Selectedids any[] A respectiva caixa de seleção será selecionada na caixa de diálogo. Se nenhum ID é encontrado, nada será selecionado para esse ID. Somente aplicável se type for DialogAndroid.listCheckbox . Requer que items[] contenham a chave descrita pelo idKey .
tipo ListType DialogAndroid.listPlain Veja ListType
widgetColor ColorValue Cor de rádio ou caixa de seleção
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
}
Chave Tipo Padrão Obrigatório Descrição
Optionscommon OptionsCommon Consulte OptionsCommon
widgetColor ColorValue Cor de campo sublinhado e cursor
type ProgressStyle
 "progressHorizontal"

Exemplos

Para ver os exemplos removidos com checkboxLabel consulte este PR - Github :: Aakashns/React -native -Dialogs - #86

Diálogo de progresso 

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

Lista básica 

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

Lista de rádio

Defina positiveText como null para o comportamento automático-dismiss no pressionamento de um item de botão de rádio. 

 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 ) ;
}
Sem discos automáticos

Aqui passamos uma string para positiveText , isso impede o auto-Dismiss na seleção de um item de rádio. 

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

Lista de verificação 

 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 ) ;
    }
}
Com o botão de lista clara

Podemos fazer com que o botão neutro seja um botão especial. Pressionando -o limpará a lista e fechará a caixa de diálogo. Se você deseja esse comportamento, defina neutralIsClear como true e também defina neutralText como uma string. Ambas as propriedades devem ser definidas. 

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

Incitar 

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

atribuiDefaults

Você pode definir alguns padrões para não precisar alterá -lo toda vez. 

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

Agora, sempre que você omita ou passa undefined ao contentColor , widgetColor ou title , ele usará os padrões que atribuímos aqui. 

 DialogAndroid . alert ( undefined , 'message here' )

Isso mostrará o título "Título padrão", sem botão positivo, e a cor da mensagem será 20% preta. Se você fez Dialog.showProgress , o indicador de progresso seria azul. etc.

Colaboradores

Obrigado a essas pessoas maravilhosas (key emoji):


Vojtech Novak
? ?
Noitidart
?
Alisson Carvalho

Anthony ou

Ashley White

Abelha

Brianso

Byron Wang

Farzad Abdolhosseini

Geoffrey Goh
?
Gustavo Fão Valvasori
?
Henrik

Heydabop

Huang Yu

Iragne

Janic Duplessis

Jeffchienzabinet

Jeremy Dagorn

Jykun

Mattias pfeiffer

PureDay

Radek Czemerys

Ricardo Fuhrmann

Ross

Vinicius Zaramella

Este projeto segue a especificação de todos os contribuintes. Contribuições de qualquer tipo de boas -vindas!

Expandir
Informações adicionais
Aplicativos Relacionados
Recomendado para você
Informações Relacionadas Todos