1睬辐、為什么會(huì)選擇這個(gè)庫(kù)作為toast提示框架疗垛？
1.1 跨平臺(tái)症汹，兼容iOS和Android
????眾所周知，react-native本身是作為一個(gè)跨平臺(tái)的解決方案贷腕，因此在項(xiàng)目中背镇，如果能夠同時(shí)在iOS和Android上跑咬展，那是最好完美的結(jié)果。react-native-root-toast庫(kù)（以后文中以root-toast代稱）是一個(gè)純JavaScript的解決方案瞒斩，跨平臺(tái)破婆。
1.2 提供很多的自定義屬性
? ? 一個(gè)好用的庫(kù)，必然會(huì)提供給用戶非常多的定義屬性胸囱，root-toast自然也例外祷舀。除了提供修改背景顏色，陰影等基本屬性旺矾，還提供了一個(gè)toast生命周期的回調(diào)函數(shù)蔑鹦，提供了點(diǎn)擊提示框時(shí)消失的功能，提供了修改一個(gè)toast的位置的屬性箕宙，這三條都很非常的新穎且在某些特殊的下達(dá)到意想不到的效果嚎朽。
1.3 提供函數(shù)調(diào)用以及組件調(diào)用兩種方法
? ? 這個(gè)組件最吸引我的一個(gè)地方是它可以通過(guò)函數(shù)調(diào)用的方式來(lái)顯示一個(gè)toast，這意味著我可以在任何地方想要彈出一個(gè)提示框時(shí)柬帕，就能彈出一個(gè)提示框哟忍。而不必考慮將組件寫在哪個(gè)頁(yè)面合適，更興奮的是陷寝，它也不會(huì)污染每個(gè)頁(yè)面锅很。如果你本身就是一個(gè)iOS開發(fā)者，想必你一定知道SVProgressHUD凤跑，root-toast也能做到像它那么靈活爆安。
1.4 在npm上的下載量已經(jīng)非常高
? ? 一個(gè)庫(kù)，好不好用仔引，看下載量就知道扔仓。root-toast庫(kù)顯然已經(jīng)經(jīng)受住了大家考驗(yàn)。成為比較穩(wěn)定且好用的toast框架了咖耘。
2翘簇、為什么這個(gè)庫(kù)讓我用得不爽？
2.1 沒(méi)有提供自定義圖標(biāo)
? ? 在國(guó)內(nèi)儿倒，絕大部分app的toast提示框都是上邊顯示一個(gè)圖標(biāo)版保，下邊顯示提示文本。一個(gè)提示框夫否，只顯示一段干巴巴的提示語(yǔ)彻犁，先不說(shuō)產(chǎn)品經(jīng)理會(huì)不會(huì)答應(yīng)，作為一個(gè)想讓自己爽的程序員首先就不答應(yīng)了凰慈。
2.2 沒(méi)有提供背景mask
? ? 項(xiàng)目通常也會(huì)存在這樣一個(gè)需求：當(dāng)一個(gè)toast提示框顯示時(shí)汞幢，需要一個(gè)背景遮罩，以突出提示框的內(nèi)容溉瓶。同時(shí)急鳄，在顯示一個(gè)toast時(shí)，就不能再點(diǎn)擊其他地方堰酿，進(jìn)行任何觸摸操作了疾宏。root-toast也沒(méi)有提供給我們相關(guān)的屬性來(lái)設(shè)置
2.3 存在不合理的地方
? ? 2.3.1 使用root-toast彈出一個(gè)toast提示框，待提示框消失触创。此時(shí)這個(gè)提示框仍未消失坎藐，只是隱藏了而已。
通過(guò)一個(gè)例子來(lái)說(shuō)明：我們使得Toast彈出多次提示框哼绑，然后通過(guò)在iOS上查看視圖分層情況岩馍，如下圖：
經(jīng)過(guò)多次彈框后，
正常邏輯下抖韩，當(dāng)一個(gè)toast提示框消失之后蛀恩，它就應(yīng)該銷毀了，然而root-toast庫(kù)卻只是隱藏茂浮，從內(nèi)存占用的角度來(lái)說(shuō)双谆，這樣的選擇并不明智∠浚可以說(shuō)是內(nèi)存泄漏顽馋。
? ? 2.3.2 同一時(shí)間彈出多個(gè)提示框，root-toast的處理邏輯是讓所有提示框疊加在一起幌羞，于是就出現(xiàn)了如下難看的畫面：
3寸谜、react-native-root-tips做了什么事情？
? ??上一小節(jié)提到的問(wèn)題属桦，我最終整理成為新的一個(gè)庫(kù)react-native-root-tips熊痴，在100%兼容root-toast庫(kù)下，新增了一下屬性和方法
? ? 3.1 增加全局修改默認(rèn)樣式方法setDefaultOptions()
? ? 假設(shè)用戶并不滿意默認(rèn)的提示框樣式, 而想要自定義樣式的時(shí)候, 使用root-toast就不得不每次都需要在show()方法里面?zhèn)魅胱远x樣式地啰。顯然愁拭，這樣是非常重復(fù)且瑣碎的，而且也并不能全局修改亏吝。故root-tips提供了一個(gè)全局修改默認(rèn)選項(xiàng)的方法setDefaultOptions()岭埠，使用方法如下：
//you can set a global default options you like
Tips.setDefaultOptions({
????showLoading: true,
????backgroundColor: 'gray',
????opacity: 0.95,
????textColor: 'white',
? ? // ........
????// setting image you like
????imageLoading: require('xxxxxxxxxx'),
????imageSuccess: require('xxxxxxxxxx'),
????imageFail: require('xxxxxxxxxx'),
????imageInfo: require('xxxxxxxxxx'),
????imageWarn: require('xxxxxxxxxx'),
});
? ? 3.2 提供便利方法
????即便我們?cè)O(shè)置了setDefaultOptions方法，當(dāng)要彈出一個(gè)加載中蔚鸥、成功惜论、失敗等等的提示框時(shí)，在root-toast庫(kù)中僅僅只提供了一個(gè)show()方法止喷，因此我們還不得不需要再次指定圖片馆类。這一過(guò)程也是非常的麻煩的，而且不靈活弹谁。為此root-tips庫(kù)提供了幾個(gè)常用的便利構(gòu)造方法：showLoading/showSuccess/showInfo/showWarn/hide乾巧。使用方法也非常簡(jiǎn)單了句喜，如下
// show a loading tips
// you need call Tips.hide() to make tips disappear
Tips.showLoading('loading...');
// show a successful tips
Tips.showSuccess('wow! success');
// show a failed tips
Tips.showFail('em...failed');
// show a Info tips
Tips.showInfo('info tips');
// show a warning tips
Tips.showWarn('warning');
// ** you can call hide() to hide showing tips **
// Tips.hide();
與此同時(shí)，如果你想要設(shè)置自定義的圖標(biāo)沟于，你可以直接在setDefaultOptions()方法里面指定相應(yīng)的圖片了咳胃。
????3.3 新增了以下屬性：
Name ? ? ? ? ? ? ? ? ? ? ? | Default ? ? ? ? ? ? ? ?? |? Type ?? ????????????| Description
----------------------------------------------------------------------------------------------
showLoading ? ? ? ??| null ? ? ? ? ? ? ? ? ? | Function ? ? ? ? ? ?| convenience method,show an Loading tips
showSuccess ? ? ? ??| null ? ? ? ? ? ? ? ? ?? | Function ? ? ? ? ?| convenience method,show an Success tips
showFail ? ? ? ? ? ? ? ? | null ? ? ? ? ? ? ? ? ?? | Function ? ? ? ? ?| convenience method,show an Fail tips
showInfo ? ? ? ? ? ? ? ?| null ? ? ? ? ? ? ? ? ?? | Function ? ? ? ? ? ?| convenience method,show an Info tips
showWarn ? ? ? ? ? ? ?| null ? ? ? ? ? ? ? ? ?? | Function ????????????| convenience method,show an Warn tips
hide ? ? ? ? ? ? ? ? ? ? ? ? | null ? ? ? ? ? ? ? ? ?? | Function???????????? | hide showing tips
imageLoading ? ? ? ?| null ? ? ? ? ?? ? ? ? ? | Object ? ? ? ? ? ? ? ? | showLoading method custom Image
imageSuccess ? ? ? ?| null ? ? ? ? ?? ? ? ? ? | Object ? ? ? ? ? ? ? ?| showSuccess method custom Image
imageFail ? ? ? ? ? ? ? ?| null ? ? ? ? ?? ????? ? ? ? | Object ? ? ? ? ? ? | showFail method custom Image
imageInfo ? ? ? ? ? ? ? ?| null ? ? ? ? ? ? ? ? ? ? ? | Object????????????? | showInfo method custom Image
imageWarn ? ? ? ? ? ? ?| null ? ? ? ? ? ? ? ? ? ? ?| Object ? ? ? ? ? ? ? ?| showWarn method custom Image
textFont ? ? ? ? ? ? ? ? ? | 14 ? ? ? ? ? ? ? ? ? ? ? ?| Number ? ? ? ? ? ? | text's font
mask ? ? ? ? ? ? ?????????? | false ? ? ? ? ? ? ? ? ? ?| Bool ? ? ? ? ? ? ? ? ? | If can touch other place when shown
maskColor ? ? ? ? ? ????| string ? ? ? ? ? ? ? ? ?| Bool ? ? ? ? ? ? ? ? ? | The mask's color
maskOpacity ? ? ? ? ? | false ? ? ? ? ? ? ? ? ? ?| Bool ? ? ? ? ? ? ? ? ?| The mask's opacity
image ? ? ? ?? ? ? ???????? | null ? ? ? ? ? ? ? ? ? ? ?| Object ? ????????????| show image icon that you like. notice: if you setting image/showSuccess/showFail/showLoading at once, the priority is descendant
imageStyle ? ? ? ?? ????| null ? ? ? ? ? ? ? ? ? ? ?| Object ????????????? | the image style?
showText ? ? ? ? ? ? ? ? | true ? ? ? ? ? ? ? ? ? ? | Bool ? ? ? ? ? ? ? ? ? | If show text
showSuccess ? ? ? ? ?| false ? ? ? ? ? ? ? ? ? | Bool ? ? ? ? ? ? ? ? ? | If show default success icon
showFail ? ? ? ? ? ? ? ? ?| false ? ? ? ? ? ? ? ? ? ?| Bool ? ? ? ? ? ? ? ? ? | If show default? fail icon
showLoading ? ? ? ? ?| false ? ? ? ? ? ? ? ? ? ?| Bool ? ? ? ? ? ? ? ? ? | If show default? loading icon
? ? 對(duì)于同一時(shí)間彈出多個(gè)提示框的情形，root-tips會(huì)將上一個(gè)提示框先關(guān)閉旷太，然后再顯示展懈。同時(shí)，如果一個(gè)提示框消失了供璧，那么這個(gè)提示框就被銷毀了存崖。
4、感謝
? ? 感謝react-native-root-toast的作者提供了這么優(yōu)秀的庫(kù)睡毒。針對(duì)以上的問(wèn)題来惧，由于個(gè)人知識(shí)淺薄，難免會(huì)對(duì)作者的用意造成誤解演顾，如果有讀者發(fā)現(xiàn)錯(cuò)誤违寞，敬請(qǐng)斧正。最后偶房，希望大家會(huì)喜歡這個(gè)庫(kù)react-native-root-tips趁曼，順便給個(gè)star，非常感謝棕洋。
