Beranda>Terkait pemrograman>Kode sumber lainnya
Unduh

Dialog-Native-Native

Modul hanya Android untuk dialog desain material. Ini adalah pembungkus di atas afollestad/material-dialog. Modul ini dirancang untuk Android hanya tanpa rencana untuk mendukung iOS.

Daftar isi

  • Instalasi
    • Tautan manual
  • Penggunaan
  • API
    • Properti
      • defaults
      • actionDismiss
      • actionNegative
      • actionNeutral
      • actionPositive
      • listPlain
      • listRadio
      • listCheckbox
      • progressHorizontal
    • Metode
      • alert
      • assignDefaults
      • dismiss
      • prompt
      • showPicker
      • showProgress
  • Tipe
    • Tipe internal
      • type ActionType
      • type ListItem
      • type ListType
      • type OptionsAlert
      • type OptionsCommon
      • type OptionsProgress
      • type OptionsPicker
      • type OptionsPrompt
      • type ProgressStyle
  • Contoh
    • Dialog Kemajuan
    • Daftar Dasar
    • Daftar Radio
      • Tanpa Dismis Otomatis
    • Daftar periksa
      • Dengan tombol daftar yang jelas
    • Mengingatkan
    • Html
    • Assigndefaults
  • Kontributor

Instalasi

  1. Memasang:

    • Menggunakan NPM: npm install react-native-dialogs --save
    • Menggunakan benang: yarn add react-native-dialogs

  2. Link:

    • react-native link react-native-dialogs
    • Atau jika ini gagal, tautkan secara manual menggunakan langkah -langkah ini

  3. Kompilasi Aplikasi Menggunakan react-native run-android

Tautan manual

Ikuti langkah-langkah ini jika tautan otomatis ( react-native link ) gagal.

  1. Di android/app/build.gradle , tambahkan ketergantungan ke Build Aplikasi Anda: 

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

  2. Di android/build.gradle , seharusnya sudah ada di sana, tetapi jika tidak, tambahkan repositori Jitpack Maven untuk mengunduh perpustakaan afollestad/material-dialog: 

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

  3. Di 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. Impor dan tambahkan paket, di 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
    );
  }
}

Penggunaan

  1. Impor di JS Anda: 

     import DialogAndroid from 'react-native-dialogs' ;

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

Properti

defaults

{positivetext: 'ok'}

Opsi default yang akan digunakan oleh semua metode. Untuk memodifikasi ini, dapat dimanipulasi secara langsung dengan DialogAndroid.defaults = { ... } atau gunakan assignDefaults

actionDismiss

static actiondismiss = "actiondismiss"

actionNegative

static actionNegative = "ActionNegative"

actionNeutral

Actioneutral statis = "ActionNeutral"

actionPositive

static actionPositive = "ActionPositive"

listPlain

statis listplain = "listplain"

listRadio

static listradio = "listradio"

listCheckbox

static listcheckbox = "listcheckbox"

progressHorizontal

Static Progresshorizontal = "Progresshorizontal"

Metode

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

Menunjukkan dialog.

Parameter Jenis Bawaan Diperlukan Keterangan
judul string, null, void Judul dialog
isi string, null, void Pesan dialog
opsi OptionsAlert Lihat OptionsAlert
assignDefaults
 static assignDefaults({
    [string]: value
): void

Tetapkan warna default misalnya, jadi Anda tidak perlu menyediakannya pada setiap panggilan metode.

{positivetext: 'ok'}

dismiss
 static dismiss(): void

Menyembunyikan dialog yang saat ini ditampilkan.

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

Menampilkan dialog dengan bidang input teks.

Parameter Jenis Bawaan Diperlukan Keterangan
judul string, null, void Judul dialog
isi string, null, void Pesan dialog
opsi OptionsPrompt Lihat 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 |}
>

Menampilkan peringatan reguler, tetapi juga dengan item yang dapat dipilih.

Parameter Jenis Bawaan Diperlukan Keterangan
judul string, null, void Judul dialog
isi string, null, void Pesan dialog
opsi OptionsPicker Lihat OptionsPrompt
showProgress
 static showProgress(
    content?: null | string,
    options: OptionsProgress
): Promise<{| action:"actionDismiss" |}>

Menunjukkan dialog kemajuan. Secara default tidak ada tombol yang ditampilkan, dan tombol Kembali Perangkat Keras tidak menutupnya. Anda harus menutupnya dengan DialogAndroid.dismiss() .

Parameter Jenis Bawaan Diperlukan Keterangan
isi string, null, void Pesan dialog
opsi OptionsProgress Lihat OptionsPrompt

Tipe

Aliran digunakan sebagai sistem pengetikan.

Tipe internal

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

Catatan

  • Jika kunci label tidak ada, tentukan tombol mana yang harus digunakan sebagai label dengan properti labelKey dari OptionsPicker .
  • id hanya diperlukan jika selectedId / selectedIds perlu digunakan.
    • Jika kunci id tidak ada, tentukan kunci mana yang harus digunakan sebagai ID dengan properti idKey dari OptionsPicker .
type ListType
 "listCheckbox" | "listPlain" | "listRadio"
type OptionsAlert
 {
    ...OptionsCommon
}
Kunci Jenis Bawaan Diperlukan Keterangan
... OptionsCommon OptionsCommon Lihat 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,
}
Kunci Jenis Bawaan Diperlukan Keterangan
dapat dibatalkan boolean Jika mengetuk di luar area dialog, atau tombol kembali perangkat keras, harus mengabaikan dialog.
CHECKBOXDEFAULTVALUE boolean false Keadaan awal kotak centang. Tidak melakukan apa pun jika checkboxLabel tidak diatur.
CHECKBOXLABEL string Jika diatur, maka ada kotak centang yang ditampilkan di bagian bawah dialog dengan label ini
isi string Pesan dialog
ContentColor ColorValue Warna pesan dialog
Contentishtml boolean Jika pesan dialog harus diuraikan sebagai HTML. (Tag yang didukung meliputi: <a> , <img> , dll)
Forcestacking boolean Jika Anda memiliki beberapa tombol aksi yang bersama -sama terlalu lebar agar pas pada satu baris, dialog akan menumpuk tombol untuk berorientasi vertikal.
LinkColor ColorValue Jika contentIsHtml benar, dan content berisi tag <a> , ini diwarnai dengan warna ini
negativecolor ColorValue
negativetext string Jika Falsy, tombol tidak ditampilkan.
netralcolor ColorValue
NeutralText string Tampilkan tombol di paling kiri dengan string ini sebagai label. Jika Falsy, tombol tidak ditampilkan.
POSITIVECOLOR ColorValue
positivetext string Jika Falsy, tombol tidak ditampilkan.
latar belakang warna ColorValue
judul string Judul dialog
Titlecolor ColorValue Warna judul
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'>
}
Kunci Jenis Bawaan Diperlukan Keterangan
ContentColor OptionsCommon#contentColor Lihat OptionsCommon#contentColor
Contentishtml OptionsCommon#contentIsHtml Lihat OptionsCommon#contentIsHtml
LinkColor OptionsCommon#linkColor Lihat OptionsCommon#linkColor
gaya ProgressStyle Lihat ProgressStyle
judul OptionsCommon#title Lihat OptionsCommon#title
Titlecolor OptionsCommon#titleColor Lihat OptionsCommon#titleColor
widgetColor ColorValue Warna indikator kemajuan
type OptionsPicker

{| ... OptionsCommon, type?: Typeof listType.listplain, maxNumberofitems?: Nomor, Item: ListItemJustLabel [], |} | {| ... OptionsCommon, type?: Typeof listType.listplain, maxnumberofitems?: Number, item: listitembare [], labelkey: string |} | {| // Radio - Tidak Ada yang Dipilih ... OptionsCommon, Type: Typeof ListType.Listradio, WidgetColor?: ColorValue // Radio Warna Item: ListItemJustLabel [], |} | {| // Radio - Tidak Ada yang Dipilih ... OptionsCommon, Type: Typeof ListType.Listradio, WidgetColor?: ColorValue // Radio Warna Item: ListItembare [], LabelKey: String |} | {| // Radio - Dipilih - ListItemfull ... OptionsCommon, Type: TypeOf ListType.Listradio, WidgetColor?: ColorValue // Radio Warna Item: ListItemfull [], SelectedId: any |} | {| // Radio - Dipilih - ListItemJustLabel ... OptionsCommon, Type: Typeof ListType.Listradio, WidgetColor?: ColorValue // Radio Warna Item: ListItemJustLabel [], IDKEY: String, SelectedID: any |} | {| // Radio - Dipilih - ListItemJustid ... OptionsCommon, Type: Typeof ListType.Listradio, WidgetColor?: ColorValue // Radio Warna Item: ListItemJUSTID [], LabelKey: String, SelectedID: any |} | {| // Radio - Presepted - ListItemBare ... OptionsCommon, Type: TypeOf ListType.Listradio, WidgetColor?: ColorValue // Radio Color Items: ListItembare [], IDKEY: String, LabelKey: String, SelectedID: any |} | {| // Daftar Periksa - Tidak Ada yang Dipilih - ListItemJustLabel ... OptionsCommon, Type: TypeOf listType.ListCheckBox, NeutralIsclear?: Boolean, WidgetColor?: ColorValue, // kotak warna Centang: ListItemjustLabel [] |} | {| // Daftar Periksa - Tidak Ada yang Dipilih - ListItemBare ... OptionsCommon, Type: TypeOf listType.listCheckBox, NeutralisClear?: Boolean, WidgetColor?: ColorValue, // CHECKBOX COLOR BARANG: LISTITEMBARE [], Labelkey: String |} | {| // Daftar Periksa - Dipilih - ListItemfull ... OptionsCommon, Type: TypeOf listType.ListCheckBox, NeutralIsclear?: Boolean, WidgetColor?: ColorValue, // kotak warna centang: ListItemfull [], selectedIDS: any [] |} | {| // Daftar Periksa - Dipilih - ListItemJustLabel ... OptionsCommon, Type: TypeOf listType.ListCheckBox, NeutralisClear?: Boolean, WidgetColor?: ColorValue, // CHECKBOX COLOR ITEM: LISTITEMJUSTLabel [], IDKEY: STRING, STREEDS, APA PUN, ANAY |} |} |} | {| // Daftar Periksa - Dipilih - ListItemJustid ... OptionsCommon, Type: Typeof ListType.ListCheckBox, NeutralIsclear?: Boolean, WidgetColor?: ColorValue, // kotak warna centang: ListItemJustId [], LabelKey: String, SelectedIDS: Adakah |} |} | {| // Daftar Periksa - Dipilih - ListItemBare ... OptionsCommon, Type: TypeOf listType.ListCheckBox, NeutralIsclear?: Boolean, WidgetColor?: ColorValue, // Centang Barang Warna: ListItEMBare [], IDKEY: String, LabelKey: String, SelecteDS: Any |}

Kunci Jenis Bawaan Diperlukan Keterangan
OptionsCommon OptionsCommon Lihat OptionsCommon
IDKEY string "pengenal"
item ListItem [] Ya Lihat ListItem
LabelKey string "label"
MaxNumberofItems number Jika Anda ingin menetapkan jumlah maksimal item yang terlihat dalam daftar
Netralisclear boolean Menekan tombol netral menyebabkan dialog ditutup dan selectedItems menjadi array kosong. Hanya berfungsi jika neutralText juga disediakan.
selectedid any Radio masing -masing akan dipilih di acara dialog. Jika tidak ada ID seperti itu ditemukan, maka tidak ada yang dipilih. Hanya berlaku jika type DialogAndroid.listRadio . Mensyaratkan items[] berisi kunci yang dijelaskan oleh idKey .
SelectectedIDS any[] Kotak centang masing -masing akan dipilih pada acara dialog. Jika tidak ada ID seperti itu ditemukan, tidak ada yang dipilih untuk ID itu. Hanya berlaku jika type DialogAndroid.listCheckbox . Mensyaratkan items[] berisi kunci yang dijelaskan oleh idKey .
jenis ListType DialogAndroid.listPlain Lihat ListType
widgetColor ColorValue Warna radio atau kotak centang
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
}
Kunci Jenis Bawaan Diperlukan Keterangan
OptionsCommon OptionsCommon Lihat OptionsCommon
widgetColor ColorValue Warna garis bawah dan kursor lapangan
type ProgressStyle
 "progressHorizontal"

Contoh

Untuk melihat contoh -contoh yang diulang dengan checkboxLabel , lihat PR ini - GitHub :: Aakashns/React -Native -Dialogs - #86

Dialog Kemajuan 

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

Daftar Dasar 

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

Daftar Radio

Atur positiveText ke null untuk perilaku Auto-Dismiss pada tekan item tombol 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 ) ;
}
Tanpa Dismis Otomatis

Di sini kita meneruskan string ke positiveText , ini mencegah Auto-Dismiss pada memilih item 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 ) ;
}

Daftar periksa 

 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 ) ;
    }
}
Dengan tombol daftar yang jelas

Kita dapat membuat tombol netral menjadi tombol khusus. Menekannya akan menghapus daftar dan menutup dialog. Jika Anda menginginkan perilaku ini, atur neutralIsClear ke true dan juga atur neutralText ke string. Kedua properti ini harus diatur. 

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

Mengingatkan 

 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

Anda dapat mengatur beberapa default sehingga Anda tidak perlu mengubahnya setiap saat. 

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

Sekarang setiap kali Anda menghilangkan atau meneruskan undefined ke contentColor , widgetColor , atau title , itu akan menggunakan default yang kami tetapkan di sini. 

 DialogAndroid . alert ( undefined , 'message here' )

Ini akan menampilkan judul "Judul Default", tanpa tombol positif, dan warna pesan akan menjadi 20% Hitam. Jika Anda melakukan Dialog.showProgress , indikator kemajuan akan berwarna biru. dll.

Kontributor

Terima kasih kepada orang -orang yang luar biasa ini (Kunci Emoji):


Vojtech Novak
? ?
NOITIDART
?
Alisson Carvalho

Anthony ou

Ashley White

Lebah

Brianso

Byron Wang

Farzad Abdolhosseini

Geoffrey Goh
?
Gustavo Fão Valvassori
?
Henrik

heydabop

Huang Yu

Iragne

Janic Duplessis

Jeffchienzabinet

Jeremy Dagorn

Jykun

Mattias Pfeiffer

pureday

Radek Czemerys

Ricardo Fuhrmann

Ross

Vinicius Zaramella

Proyek ini mengikuti spesifikasi semua-kontributor. Kontribusi apa pun yang baik!

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua