1、為什么會選擇這個庫作為toast提示框架？
1.1 跨平臺，兼容iOS和Android
????眾所周知，react-native本身是作為一個跨平臺的解決方案，因此在項目中，如果能夠同時在iOS和Android上跑，那是最好完美的結(jié)果。react-native-root-toast庫（以后文中以root-toast代稱）是一個純JavaScript的解決方案，跨平臺。
1.2 提供很多的自定義屬性
? ? 一個好用的庫，必然會提供給用戶非常多的定義屬性，root-toast自然也例外。除了提供修改背景顏色，陰影等基本屬性，還提供了一個toast生命周期的回調(diào)函數(shù)，提供了點擊提示框時消失的功能，提供了修改一個toast的位置的屬性，這三條都很非常的新穎且在某些特殊的下達到意想不到的效果。
1.3 提供函數(shù)調(diào)用以及組件調(diào)用兩種方法
? ? 這個組件最吸引我的一個地方是它可以通過函數(shù)調(diào)用的方式來顯示一個toast，這意味著我可以在任何地方想要彈出一個提示框時，就能彈出一個提示框。而不必考慮將組件寫在哪個頁面合適，更興奮的是，它也不會污染每個頁面。如果你本身就是一個iOS開發(fā)者，想必你一定知道SVProgressHUD，root-toast也能做到像它那么靈活。
1.4 在npm上的下載量已經(jīng)非常高
? ? 一個庫，好不好用，看下載量就知道。root-toast庫顯然已經(jīng)經(jīng)受住了大家考驗。成為比較穩(wěn)定且好用的toast框架了。
2、為什么這個庫讓我用得不爽？
2.1 沒有提供自定義圖標(biāo)
? ? 在國內(nèi)，絕大部分app的toast提示框都是上邊顯示一個圖標(biāo)，下邊顯示提示文本。一個提示框，只顯示一段干巴巴的提示語，先不說產(chǎn)品經(jīng)理會不會答應(yīng)，作為一個想讓自己爽的程序員首先就不答應(yīng)了。
2.2 沒有提供背景mask
? ? 項目通常也會存在這樣一個需求：當(dāng)一個toast提示框顯示時，需要一個背景遮罩，以突出提示框的內(nèi)容。同時，在顯示一個toast時，就不能再點擊其他地方，進行任何觸摸操作了。root-toast也沒有提供給我們相關(guān)的屬性來設(shè)置
2.3 存在不合理的地方
? ? 2.3.1 使用root-toast彈出一個toast提示框，待提示框消失。此時這個提示框仍未消失，只是隱藏了而已。
通過一個例子來說明：我們使得Toast彈出多次提示框，然后通過在iOS上查看視圖分層情況，如下圖：
經(jīng)過多次彈框后，
正常邏輯下，當(dāng)一個toast提示框消失之后，它就應(yīng)該銷毀了，然而root-toast庫卻只是隱藏，從內(nèi)存占用的角度來說，這樣的選擇并不明智?？梢哉f是內(nèi)存泄漏。
? ? 2.3.2 同一時間彈出多個提示框，root-toast的處理邏輯是讓所有提示框疊加在一起，于是就出現(xiàn)了如下難看的畫面：
3、react-native-root-tips做了什么事情？
? ??上一小節(jié)提到的問題，我最終整理成為新的一個庫react-native-root-tips，在100%兼容root-toast庫下，新增了一下屬性和方法
? ? 3.1 增加全局修改默認樣式方法setDefaultOptions()
? ? 假設(shè)用戶并不滿意默認的提示框樣式, 而想要自定義樣式的時候, 使用root-toast就不得不每次都需要在show()方法里面?zhèn)魅胱远x樣式。顯然，這樣是非常重復(fù)且瑣碎的，而且也并不能全局修改。故root-tips提供了一個全局修改默認選項的方法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 提供便利方法
????即便我們設(shè)置了setDefaultOptions方法，當(dāng)要彈出一個加載中、成功、失敗等等的提示框時，在root-toast庫中僅僅只提供了一個show()方法，因此我們還不得不需要再次指定圖片。這一過程也是非常的麻煩的，而且不靈活。為此root-tips庫提供了幾個常用的便利構(gòu)造方法：showLoading/showSuccess/showInfo/showWarn/hide。使用方法也非常簡單了，如下
// 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è)置自定義的圖標(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
? ? 對于同一時間彈出多個提示框的情形，root-tips會將上一個提示框先關(guān)閉，然后再顯示。同時，如果一個提示框消失了，那么這個提示框就被銷毀了。
4、感謝
? ? 感謝react-native-root-toast的作者提供了這么優(yōu)秀的庫。針對以上的問題，由于個人知識淺薄，難免會對作者的用意造成誤解，如果有讀者發(fā)現(xiàn)錯誤，敬請斧正。最后，希望大家會喜歡這個庫react-native-root-tips，順便給個star，非常感謝。
