1. 程式人生 > >React Native API模組之Alert彈出框詳解及使用

React Native API模組之Alert彈出框詳解及使用

(一)前言

今天我們繼續來一個Android、iOS平臺通用的彈出框Alert模組。

剛建立的React Native技術交流2群(496601483),歡迎各位大牛,React Native技術愛好者加入交流!同時部落格右側歡迎微信掃描關注訂閱號,移動技術乾貨,精彩文章技術推送!

該Alert模組是建立彈出一個彈框,顯示一個標題以及相關資訊內容。該彈出框可以提供一系列的可選按鈕,點選任何一個按鈕都會呼叫onPress方法並且關閉彈框。預設情況下,該只會顯示一個'確定'按鈕。

該模組API是在Android、iOS平臺通用的顯示靜態的彈框。如果需要顯示一個提示框可以讓使用者輸入相關資訊的,詳細

請檢視AlertIOS;該帶輸入框的彈框只適用於iOS平臺。

(二)iOS平臺相關

只有iOS平臺可以指定多個數量的button,每個按鈕都可以設定特殊的風格,不過風格為'default','cancel','destructive'三種狀態之一。

(三)Android平臺相關

iOS平臺可以指定多個數量的button,但是在Android平臺上面最多隻能指定三個按鈕。Android平臺的彈出框的按鈕有'中間態','取消','確認'三種狀態

1.如果你只有指定了一個按鈕,那麼該為'position' (例如:確定)

2.如果你指定了兩個按鈕,那麼該會'negative','position' (例如:確定,取消)

3.如果你指定了三個按鈕,那麼該會'neutral','negative','positive'(例如:稍後再說,'確定','取消')

(四)Alert方法

static alert(title:string,message?:string,buttons?:Buttons,type?:AlertType)  該會Alert模組顯示彈框的靜態方法,有四個引數,分別為標題,資訊,按鈕,以及按鈕的風格型別

(五)Alert使用例項

上面已經講解了Alert模組的基本介紹,現在來演示一下該模組的具體使用,例項程式碼如下:

?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 /** * React Native Alert模組具體使用例項 */ 'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, View, Alert, ToastAndroid,

相關推薦

React Native API模組Alert使用

(一)前言 今天我們繼續來一個Android、iOS平臺通用的彈出框Alert模組。 剛建立的React Native技術交流2群(496601483),歡迎各位大牛,React Native技術愛好者加入交流!同時部落格右側歡迎微信掃描關注訂閱號,移動技術乾貨,精彩文章技術推送! 該Alert模組

小程式

小程式彈出框詳解 qjlx: function() { var itemList = ['病假', '事假']; wx.showActionSheet({ itemList: itemList, success: function(res) { c

React-native 學習AlertDialog

/** * 功能: alert對話方塊 */ 'use strict'; /** * 匯入模組 */ // 系統模組 import React, { Component } from 'react'; import { StyleSheet,

React-native 學習Confirm

``` /** * 功能: Confirm對話方塊 */ /*visible bool 控制彈出框隱藏(false)或顯示(true) transparent bool 控制彈出框背景,若為false則彈出框背景為灰色,會擋住彈出框後面的內容,true時才為

Js-Alert幾種樣式(一級)

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~js-alert彈出框樣式第一種~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Promise重寫confirm,alert .then()

所有程式碼,可以執行: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>con

Discuz!開發js函式showDialog介紹

showDialog定義地址:\static\js\common.js var showDialogST = null; function showDialog(msg, mode, t, func, cover, funccancel, leftmsg, confirmt

系統預設alert域名title問題

(function(){        window.alert = function(name){var iframe = document.createElement("IFRAME");iframe.style.display="none";iframe.setAttribute("src", 'dat

微信小程式modal遮罩層元件——可帶文字

modal彈出框遮罩層可實現提示資訊、驗證碼等功能 然而在官方文件已經刪除了modal的頁面,說要廢棄modal 就個人而言modal元件無法被wx.showModal完全替代。大家都知道小程式的wxml的元件可以通過改變js的值實現重新渲染,而介面是無

手機頁面alert有url咋辦

在script中加入如下程式碼 window.alert = function(name){ // 重寫alert方法去掉ios下alert帶的url var iframe = doc

ISO手機端的h5介面 alert 不顯示IP地址

<script> window.alert = function(name){ var iframe = document.createElement("IFRAM

Layui

今天空了學習一下彈出層 還是一步步展示把 首先,layer可以獨立使用,也可以通過Layui模組化使用。我個人一直是用的模組化的 所以下面素有的都是基於模組化的。 引入好相關檔案就可以開始啦  今天放圖片把 試著學一下放圖片 1.最簡單的彈層,這個彈層的效果其實就是一個加了特效和樣式的aler

layer

前言:學習layer彈出框,之前專案是用bootstrap模態框,後來改用layer彈出框,在文章的後面,我會分享專案的一些程式碼(我自己寫的)。 layer至今仍作為layui的代表作,她的受眾廣泛並非偶然,而是這五年多的堅持,不斷完善和維護、不斷建設和提升社群服務,使得

[tensorflow 應用路]Batch Normalization 原理應用方法

批正則化(Batch Normalize,BN)是2015年由Sergey Ioffe提出的方法,用於消除神經網路上一層不同分佈的輸入導致本層引數更新困難。由於各個層的卷積核引數不同,根據反向傳播法則我們知道,∣∣W∣∣||W||∣∣W∣∣及結果∣∣h∣∣||h

Angular自定義指令compile, link, controller屬性例項演示

本文章主要就angularjs指令中的compile,link及controller函式的使用和區別進行詳細討論。以下是本文的結構: directive的執行原理 compile用法 link 用法 controller 用法 compile,link及co

資料結構圖文解析:二叉堆C++模板實現

0. 資料結構圖文解析系列 1. 二叉堆的定義 二叉堆是一種特殊的堆,二叉堆是完全二叉樹或近似完全二叉樹。二叉堆滿足堆特性:父節點的鍵值總是保持固定的序關係於任何一個子節點的鍵值,且每個節點的左子樹和右子樹都是一個二叉堆。 當父節點的鍵值總是大於或等於任何一個子節點的鍵值時為最大堆。 當父節點的鍵值總是小於

資料結構折半插入排序圖文程式碼(C++實現)

問題:對待排序的陣列r[1..n]中的元素進行直接插入排序,得到一個有序的(從小到大)的陣列r[1..n]。演算法思想:1、設待排序的記錄存放在陣列r[1..n]中,r[1]是一個有序序列。2、迴圈n-1次,每次使用折半查詢法,查詢r[i](i=2,..,n)在已排好的序列r

python+selenium處理alert對話方塊

注:本篇文章轉載 http://www.cnblogs.com/mengyu/p/6952774.html當我們登入某些介面的時候,輸入使用者名稱和密碼錯誤,會彈出一個alert(警告)對話方塊,如果不叉掉它是沒法繼續執行下去,所以無法通過定位的方式定位它的位置。我們的彈出對

React Native環境配置Windows版本搭建

services 就會 wrapper function 新建項目 之前 path ont 系統 接近年底了,回想這一年都做了啥,學習了啥,然後突然發現,這一年買了不少書,看是看了,就沒有完整看完的。悲催。然後,最近項目也不是很緊了,所以抽空學習了H5。自學啃書還是很無趣的

React Native開發】React Native控件ProgressBarAndroid進度條解說(12)

ice 發現 來講 top 文章 func dev all ios 轉載請標明出處:http://blog.csdn.net/developer_jiangqq/article/details/50596367本文出自:【江清清的博客】(一)前言 【好消息】