Главная страница>Связанные с программированием>Другой исходный код
Скачать

реагируют-коричневые цифры

Модуль только для Android для диалогов дизайна материала. Это обертка над Afollestad/Dialogs. Этот модуль предназначен для 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
  • Примеры
    • Диалог прогресса
    • Основной список
    • Список радио
      • Без авто-диски
    • Контрольный список
      • С кнопкой Lile List
    • Быстрый
    • HTML
    • Назначение
  • Участники

Установка

  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

{positivetext: 'ok'}

Параметры по умолчанию, которые будут использоваться всеми методами. Чтобы изменить это, либо непосредственно манипулируется DialogAndroid.defaults = { ... } или используйте assignDefaults

actionDismiss

static actionDismiss = "actionDismiss"

actionNegative

статическое действие negative = "actionnegative"

actionNeutral

Статическое действие.

actionPositive

Статическое действиепозитивное = "actionPositive"

listPlain

static listplain = "listplain"

listRadio

static listradio = "listradio"

listCheckbox

static listCheckbox = "listCheckbox"

progressHorizontal

static progresshorizontal = "progresshorgyzontal"

Методы

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

Например, установите цвета по умолчанию, поэтому вам не нужно предоставлять его на каждом вызове метода.

{positivetext: '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 не существует, укажите, какой клавишу следует использовать в качестве метки со свойством labelKey OptionsPicker .
  • id требуется только в том случае, если необходимо использовать selectedId / selectedIds .
    • Если клавиша id не существует, укажите, какой клавишу следует использовать в качестве идентификатора с свойством idKey of OptionsPicker .
type ListType
 "listCheckbox" | "listPlain" | "listRadio"
type OptionsAlert
 {
    ...OptionsCommon
}
Ключ Тип По умолчанию Необходимый Описание
... опционы 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 Если постукивание за пределами области диалога, или кнопку «Аппаратное обратное», следует отклонить диалоговое окно.
FaceboxDefaultValue boolean false Первоначальное состояние флажки. Ничего не делает, если checkboxLabel не установлен.
Checkboxlabel string Если установлено, то в нижней части диалога показан флажок, показанный в нижней части диалога
содержание string Диаловое сообщение
ContentColor ColorValue Цвет диалогового сообщения
Conteplishtml boolean Если диалоговое сообщение должно быть проанализировано как HTML. (Поддерживаемые теги включают: <a> , <img> и т. Д.)
прозвук boolean Если у вас есть несколько кнопок действия, которые вместе слишком широки, чтобы соответствовать одной линии, диалог будет складывать кнопки, которые будут вертикально ориентированными.
Linkcolor ColorValue Если contentIsHtml это правда, а content содержит теги <a> , они окрашены этим цветом
негативная ColorValue
negatiVetext string Если FASSY, кнопка не показана.
Нейтральный Колора ColorValue
нейтральный текст string Показывает кнопку в левом углу с этой строкой в ​​качестве метки. Если FASSY, кнопка не показана.
позиции ColorValue
позиции string Если FASSY, кнопка не показана.
фоновая кожура 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
Conteplishtml OptionsCommon#contentIsHtml См. OptionsCommon#contentIsHtml
Linkcolor OptionsCommon#linkColor См OptionsCommon#linkColor
стиль ProgressStyle Смотрите ProgressStyle
заголовок OptionsCommon#title См. OptionsCommon#title
TITLECOLOR OptionsCommon#titleColor См OptionsCommon#titleColor
Виджетколор ColorValue Индикатор цвета прогресса
type OptionsPicker

{| ... OptionsCommon, type?: Typeof listtype.listplain, maxnumberofitems?: Номер, элементы: listitemjustlabel [], |} | {| ... OptionsCommon, type?: Typeof ListType.listplain, maxnumberOfitems?: Номер, элементы: listitembare [], labelkey: string |} | {| // радио - без предварительного выбора ... Optionscommon, type: typeOf ListType.listradio, WidgetColor?: ColorValue // Радиосол: ListItemJustlabel [], |} | {| // Радио - без предварительного выбранного ... Опции, тип: typeOf ListType.listradio, WidgetColor?: ColorValue // Радиосол Items: listitembare [], labelkey: String |} | {| // Радио - предварительно выбран - listitemfull ... Optionscommon, type: typeof lecttype.listradio, widgetcolor?: colorvalue // Радиосол: Listitemfull [], SelectedId: any |} | {| // Радио - предварительно выбран - listitemjustlabel ... OptionsCommon, type: typeOf listtype.listradio, widgetcolor?: colorvalue // радиоцветные элементы: listitemjustlabel [], idkey: string, selectedid: any |} | {| // Радио - предварительно выбран - listIteMjustid ... OptionsCommon, type: typeOf ListType.Listradio, WidgetColor?: ColorValue // Радиосол: ListIteMjustid [], Labelkey: String, SelectedId: any |} | {| // Радио - предварительно выбран - listitembare ... OptionsCommon, type: typeof listtype.listradio, widgetcolor?: colorvalue // радиоцветные элементы: listitembare [], idkey: String, labelkey: string, selectedid: any |} | {| // Контрольный список - без предварительного выбора - ListIteMjustlabel ... OptionsCommon, Type: typeOf listType.listCheckbox, NatueliSclear?: Boolean, WidgetColor?: ColorValue, // Флакторы Цветные элементы: listitemjustlabel [] |} | {| // Контрольный список - без предварительного выбора - ListIteMbare ... OptionsCommon, тип: typeOf ListType.listCheckbox, NetuliSclear?: Boolean, WidgetColor?: ColorValue, // Флакторы Цветные элементы: listitembare [], labelkey: String |} | {| // Контрольный список - предварительно выбран - ListIteMfull ... OptionsCommon, Type: typeOf ListType.listcheckbox, NetuliSclear?: Boolean, WidgetColor?: ColorValue, // Флакторы Цветовые элементы: listitemfull [], selectedids: any [] |} | {| // Контрольный список - предварительно выбран - listItemjustlabel ... OptionsCommon, type: typeOf listType.listCheckbox, NetuliSclear?: Boolean, WidgetColor?: ColorValue, // Флакторы Цветные элементы: listitemjustlabel [], idkey: String, Selectedids: any |} | {| // Контрольный список - предварительно выбран - ListIteMjustid ... OptionsCommon, type: typeOf ListType.listCheckbox, NatueliSclear?: Boolean, WidgetColor?: ColorValue, // Флакторы Цветовые элементы: ListItemJustid [], Labelkey: String, Selectedids: any |} | {| // Контрольный список - предварительно выбран - listIteMbare ... OptionsCommon, type: typeOf ListType.listCheckbox, NatueliSclear?: Boolean, WidgetColor?: ColorValue, // Флакторы Цветовые элементы: listitembare [], Idkey: String, Labelkey: String, Selectedids: любой |}

Ключ Тип По умолчанию Необходимый Описание
Опционы OptionsCommon Смотрите OptionsCommon
Идки string "идентификатор"
предметы ListItem [] Да Смотрите ListItem
лейблки string "этикетка"
maxnumberofitems number Если вы хотите установить максимальное количество видимых элементов в списке
нейтральный boolean Нажатие нейтральной кнопки приводит к закрытию диалога, а selectedItems становятся пустым массивом. Работает только в случае neutralText .
SelectedId any Соответствующее радио будет выбрано на Dialog Show. Если такой идентификатор не найден, то ничего не выбрано. Только применимо, если type - это DialogAndroid.listRadio . Требует, чтобы items[] содержали ключ, описанный idKey .
Selectedids any[] Соответствующий флажок будет выбран на Dialog Show. Если такой идентификатор не найден, для этого идентификатора ничего не выбрано. Только применимо, если type - это DialogAndroid.listCheckbox . Требует, чтобы items[] содержали ключ, описанный idKey .
тип ListType DialogAndroid.listPlain Смотрите ListType
Виджетколор 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
Виджетколор ColorValue Цвет поля подчеркивается и курсор
type ProgressStyle
 "progressHorizontal"

Примеры

Чтобы увидеть примеры, переделанные с помощью checkboxLabel , см. Это PR - Github :: Aakashns/React -C -Dialogs - #86

Диалог прогресса 

 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 для поведения Auto-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 ) ;
}
Без авто-диски

Здесь мы передаем строку в 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 ) ;
    }
}
С кнопкой Lile List

Мы можем сделать нейтральную кнопку быть специальной кнопкой. Нажатие на него очистит список и закроет диалог. Если вы хотите такое поведение, установите 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
} ) ;

Назначение

Вы можете установить по умолчанию, чтобы вам не приходилось менять каждый раз. 

 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 , индикатор прогресса будет синим. и т. д.

Участники

Спасибо этим замечательным людям (ключ эмодзи):


Vojtech Novak
? ?
Noitidart
?
Алиссон Карвалью

Энтони О.

Эшли Уайт

Пчела

Брайансо

Байрон Ван

Фарзад Абдольхосейни

Джеффри Го
?
Густаво Фао Вальвассори
?
Хенрик

Гейдабоп

Хуан Ю

Иран

Janic Duplessis

Jeffchienzabinet

Джереми Дагорн

Джикун

Mattias Pfeiffer

Pureday

Радек Чемри

Рикардо Фурманн

Росс

Виниция Зарамелла

Этот проект следует за спецификацией всех контролей. Взносы любого вида приветствуются!

Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все