Page d'accueil>Lié à la programmation>Autre code source
Télécharger

dialogue réactif

Un module Android uniquement pour les boîtes de dialogue de conception de matériaux. Il s'agit d'un emballage sur Afollestad / Material-Dialogs. Ce module est conçu pour Android uniquement sans l'intention de prendre en charge iOS.

Table des matières

  • Installation
    • Liaison manuelle
  • Usage
  • API
    • Propriétés
      • defaults
      • actionDismiss
      • actionNegative
      • actionNeutral
      • actionPositive
      • listPlain
      • listRadio
      • listCheckbox
      • progressHorizontal
    • Méthodes
      • alert
      • assignDefaults
      • dismiss
      • prompt
      • showPicker
      • showProgress
  • Types
    • Types internes
      • type ActionType
      • type ListItem
      • type ListType
      • type OptionsAlert
      • type OptionsCommon
      • type OptionsProgress
      • type OptionsPicker
      • type OptionsPrompt
      • type ProgressStyle
  • Exemples
    • Dialogue Progrer
    • Liste de base
    • Liste radio
      • Sans automatique
    • Liste de contrôle
      • Avec bouton de liste claire
    • Rapide
    • Html
    • AssignDefaults
  • Contributeurs

Installation

  1. Installer:

    • Utilisation de NPM: npm install react-native-dialogs --save
    • Utilisation du fil: yarn add react-native-dialogs

  2. Lien:

    • react-native link react-native-dialogs
    • Ou si cela échoue, liez manuellement en utilisant ces étapes

  3. Compiler l'application à l'aide de react-native run-android

Liaison manuelle

Suivez ces étapes si le lien automatique ( react-native link ) a échoué.

  1. Dans android/app/build.gradle , ajoutez la dépendance à votre application Build: 

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

  2. Dans android/build.gradle , il devrait déjà être là, mais au cas où ce n'est pas le cas, ajoutez le référentiel Jitpack Maven pour télécharger la bibliothèque AfoLstad / Material-Dialogs: 

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

  3. Dans 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. Importez et ajoutez un package, dans 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
    );
  }
}

Usage

  1. Importez-le dans votre JS: 

     import DialogAndroid from 'react-native-dialogs' ;

  2. Appel 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

Propriétés

defaults

{positiveText: 'ok'}

Les options par défaut à utiliser par toutes les méthodes. Pour modifier cela, soit directement manipuler avec DialogAndroid.defaults = { ... } ou utiliser assignDefaults

actionDismiss

statique ActionDismiss = "ActionDismiss"

actionNegative

Statique ActionNegative = "ActionNegative"

actionNeutral

statique ActionNeutral = "ActionNeutral"

actionPositive

statique actionpositive = "actionpositive"

listPlain

statique listplain = "listplain"

listRadio

Listradio statique = "Listradio"

listCheckbox

statique listcheckbox = "listcheckbox"

progressHorizontal

statique progresshorizontal = "progresshorizontal"

Méthodes

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

Montre une boîte de dialogue.

Paramètre Taper Défaut Requis Description
titre string, null, void Titre de dialogue
contenu string, null, void Message de dialogue
options OptionsAlert Voir OptionsAlert
assignDefaults
 static assignDefaults({
    [string]: value
): void

Définissez les couleurs par défaut par exemple, vous n'avez donc pas à le fournir sur chaque appel de méthode.

{positiveText: 'ok'}

dismiss
 static dismiss(): void

Cache la boîte de dialogue actuellement affichée.

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

Affiche une boîte de dialogue avec un champ de saisie de texte.

Paramètre Taper Défaut Requis Description
titre string, null, void Titre de dialogue
contenu string, null, void Message de dialogue
options OptionsPrompt Voir 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 |}
>

Montre une alerte régulière, mais également avec des éléments qui peuvent être sélectionnés.

Paramètre Taper Défaut Requis Description
titre string, null, void Titre de dialogue
contenu string, null, void Message de dialogue
options OptionsPicker Voir OptionsPrompt
showProgress
 static showProgress(
    content?: null | string,
    options: OptionsProgress
): Promise<{| action:"actionDismiss" |}>

Affiche une boîte de dialogue Progress. Par défaut, aucun boutons n'est affiché et le bouton de retour matériel ne le ferme pas. Vous devez le fermer avec DialogAndroid.dismiss() .

Paramètre Taper Défaut Requis Description
contenu string, null, void Message de dialogue
options OptionsProgress Voir OptionsPrompt

Types

Le flux est utilisé comme système de frappe.

Types internes

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

Notes

  • Si la touche label n'existe pas, spécifiez la touche doit être utilisée comme étiquette avec la propriété labelKey d' OptionsPicker .
  • id n'est requis que si selectedId / selectedIds doit être utilisé.
    • Si la touche id n'existe pas, spécifiez quelle clé doit être utilisée comme ID avec la propriété idKey d' OptionsPicker .
type ListType
 "listCheckbox" | "listPlain" | "listRadio"
type OptionsAlert
 {
    ...OptionsCommon
}
Clé Taper Défaut Requis Description
... OptionScommon OptionsCommon Voir 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,
}
Clé Taper Défaut Requis Description
non réduit boolean Si vous appuyez sur la zone de dialogue ou le bouton de retour matériel, devrait rejeter la boîte de dialogue.
CheckBoxDefaultValue boolean false L'état initial de la case à cocher. Ne fait rien si checkboxLabel n'est pas défini.
CheckboxLabel string Si défini, il y a une case à cocher affichée en bas de la boîte de dialogue avec cette étiquette
contenu string Message de dialogue
contenu ColorValue Couleur du message de dialogue
contenu boolean Si le message de la boîte de dialogue doit être analysé comme HTML. (Les balises prises en charge incluent: <a> , <img> , etc.)
forcestack boolean Si vous avez plusieurs boutons d'action qui ensemble sont trop larges pour s'adapter sur une ligne, la boîte de dialogue empilera les boutons pour être orientés verticalement.
liencolor ColorValue Si contentIsHtml est vrai et que content contient des balises <a> , celles-ci sont colorées avec cette couleur
négativecolor ColorValue
négativetext string Si Falsy, le bouton n'est pas affiché.
color neutre ColorValue
texte neutre string Affiche le bouton à l'extrême gauche avec cette chaîne comme étiquette. Si Falsy, le bouton n'est pas affiché.
positivecolor ColorValue
positiveText string Si Falsy, le bouton n'est pas affiché.
fond de fond ColorValue
titre string Titre de dialogue
titlecolor ColorValue Couleur du titre
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'>
}
Clé Taper Défaut Requis Description
contenu OptionsCommon#contentColor Voir OptionsCommon#contentColor
contenu OptionsCommon#contentIsHtml Voir OptionsCommon#contentIsHtml
liencolor OptionsCommon#linkColor Voir OptionsCommon#linkColor
style ProgressStyle Voir ProgressStyle
titre OptionsCommon#title Voir OptionsCommon#title
titlecolor OptionsCommon#titleColor Voir OptionsCommon#titleColor
widgetcolor ColorValue Couleur de l'indicateur de progrès
type OptionsPicker

{| ... OptionScommon, type ?: typeof listType.listPlain, maxNumberoFitems ?: Numéro, éléments: listItemJustLabel [], |} | {| ... OptionScommon, Type ?: Typeof listType.ListPlain, maxNumberoFitems ?: Numéro, éléments: listItembare [], labelKey: String |} | {| // Radio - Pas de présélectionné ... OptionScommon, Type: Typeof ListType.Listradio, WidgetColor ?: ColorValue // Radio Color Items: listItemJustLabel [], |} | {| // Radio - Pas de présélectionné ... OptionScommon, Type: Typeof ListType.Listradio, WidgetColor ?: ColorValue // Radio Color Items: ListItembare [], LabelKey: String |} | {| // Radio - Preselected - ListItemfull ... OptionScommon, Type: Typeof ListType.Listradio, WidgetColor ?: ColorValue // Radio Color Items: ListItemfull [], SelectedId: Any |} | {| // Radio - Preselected - listItemJustLabel ... OptionScommon, type: typeof listType.Listradio, widgetColor ?: ColorValue // Radio Color Items: listItemJustLabel [], idkey: String, String, Selected: any |} | {| // Radio - Preselected - listItemJustid ... OptionScommon, Type: Typeof ListType.Listradio, widgetColor ?: ColorValue // Radio Color Items: listItemJustid [], LabelKey: String, Selected: Any |} | {| // Radio - Preselected - listItembare ... OptionScommon, type: typeof listType.Listradio, widgetColor ?: ColorValue // Radio Color Items: listItembare [], idkey: String, LabelKey: String, Selected: any |} | {| // Liste de contrôle - Pas de présélectionné - listItemJustLabel ... OptionScommon, type: typeof listType.ListCheckbox, NeutraliseClear ?: Boolean, widgetColor ?: ColorValue, // Éléments de couleur de la boîte à cocher: ListItemJustLabel [] |} | {| // Liste de contrôle - Non présélectionné - listItembare ... OptionScommon, type: typeof listType.Listcheckbox, neutraliseClear ?: Boolean, widgetColor ?: ColorValue, // Checkbox Color Items: listItembare [], LabelKey: String |} | {| // Liste de contrôle - présélectionné - listItemfull ... OptionScommon, type: typeof listType.Listcheckbox, neutralisclear ?: booléen, widgetcolor ?: ColorValue, // cocher les éléments de couleur: listItemfull [], selectedS: any [] |} | {| // Liste de vérification - présélectionné - listItemJustLabel ... OptionScommon, type: typeof listType.Listcheckbox, NeutraliseClear ?: Boolean, widgetColor ?: ColorValue, // Checkbox Color Items: listItemJustLabel [], Idkey: String, SelecteDIDS: Any} |} | {| // Liste de contrôle - présélectionné - listItemJustid ... OptionScommon, type: typeof listType.Listcheckbox, NeutraliseClear ?: Boolean, widgetColor ?: ColorValue, // Checkbox Color Items: listItemJustid [], LabelKey: String, SelecteDIDS: Any |} | {| // CheckList - Preselected - listItembare ... OptionScommon, type: typeof listType.Listcheckbox, neutraliseClear ?: booléen, widgetcolor ?: ColorValue, // cocher les éléments de couleur: listItembare [], idkey: String, LabelKey: String, SelectedSidS: Any |}

Clé Taper Défaut Requis Description
OptionScommon OptionsCommon Voir OptionsCommon
idkey string "identifiant"
articles ListItem [] Oui Voir ListItem
marquage string "étiquette"
maxnumberofitems number Si vous souhaitez définir une quantité maximale d'articles visibles dans une liste
neutralisar boolean En appuyant sur le bouton neutre, la boîte de dialogue est fermée et selectedItems est un tableau vide. Ne fonctionne que si neutralText est également fourni.
sélectionné any La radio respective sera sélectionnée dans l'émission de dialogue. Si aucune pièce d'identification de ce type n'est trouvée, rien n'est sélectionné. Uniquement applicable si type est DialogAndroid.listRadio . Nécessite que items[] contiennent la clé décrite par idKey .
selectIDIDS any[] La case à cocher respective sera sélectionnée dans l'émission de dialogue. Si aucun identifiant de ce type n'est trouvé, rien n'est sélectionné pour cet identifiant. Uniquement applicable si type est DialogAndroid.listCheckbox . Nécessite que items[] contiennent la clé décrite par idKey .
taper ListType DialogAndroid.listPlain Voir ListType
widgetcolor ColorValue Couleur de la radio ou de la case à cocher
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
}
Clé Taper Défaut Requis Description
OptionScommon OptionsCommon Voir OptionsCommon
widgetcolor ColorValue Couleur de soulignement de champ et de curseur
type ProgressStyle
 "progressHorizontal"

Exemples

Pour voir les exemples refait avec checkboxLabel , consultez ce PR - github :: aakashns / react-native-dialogs - # 86

Dialogue Progrer 

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

Liste de base 

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

Liste radio

Définissez positiveText sur null pour le comportement automatique-dissmiss lors d'un élément de bouton radio. 

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

Ici, nous passons dans une chaîne à positiveText , cela empêche l'auto-Dismiss sur certains éléments radio. 

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

Liste de contrôle 

 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 ) ;
    }
}
Avec bouton de liste claire

Nous pouvons faire que le bouton neutre soit un bouton spécial. Appuyez sur celui-ci effacer la liste et fermer la boîte de dialogue. Si vous voulez ce comportement, définissez neutralIsClear sur true et définissez également neutralText sur une chaîne. Ces deux propriétés doivent être définies. 

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

Rapide 

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

AssignDefaults

Vous pouvez définir des valeurs par défaut afin que vous n'ayez pas à le modifier à chaque fois. 

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

Maintenant, chaque fois que vous omettez ou passez undefined à contentColor , widgetColor ou title , il utilisera les valeurs par défaut que nous avons attribuées ici. 

 DialogAndroid . alert ( undefined , 'message here' )

Cela affichera le titre "Title par défaut", sans bouton positif, et la couleur du message sera à 20% noir. Si vous faisiez Dialog.showProgress , l'indicateur de progression serait bleu. etc.

Contributeurs

Merci à ces gens merveilleux (clé emoji):


Vojtech Novak
? ?
Noitidart
?
Alisson Carvalho

Anthony ou

Ashley White

Abeille

Brianso

Byron Wang

Farzad Abdolhosseini

Geoffrey Goh
?
Gustavo Fão Valvassori
?
Henrik

heydabop

Huang Yu

Iragneuse

Janic Duplessis

jeffchienzabinet

Jeremy Dagorn

jykun

Mattias Pfeiffer

pureday

Radek Czemerys

Ricardo Fuhrmann

Ross

Vinicius Zaramella

Ce projet suit les spécifications de tous les contributeurs. Contributions de toute nature bienvenue!

Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout