1、为什么会选择这个库作为toast提示框架？
1.1 跨平台，兼容iOS和Android
众所周知，react-native本身是作为一个跨平台的解决方案，因此在项目中，如果能够同时在iOS和Android上跑，那是最好完美的结果。react-native-root-toast库（以后文中以root-toast代称）是一个纯JavaScript的解决方案，跨平台。
1.2 提供很多的自定义属性
一个好用的库，必然会提供给用户非常多的定义属性，root-toast自然也例外。除了提供修改背景颜色，阴影等基本属性，还提供了一个toast生命周期的回调函数，提供了点击提示框时消失的功能，提供了修改一个toast的位置的属性，这三条都很非常的新颖且在某些特殊的下达到意想不到的效果。
1.3 提供函数调用以及组件调用两种方法
这个组件最吸引我的一个地方是它可以通过函数调用的方式来显示一个toast，这意味着我可以在任何地方想要弹出一个提示框时，就能弹出一个提示框。而不必考虑将组件写在哪个页面合适，更兴奋的是，它也不会污染每个页面。如果你本身就是一个iOS开发者，想必你一定知道SVProgressHUD，root-toast也能做到像它那么灵活。
1.4 在npm上的下载量已经非常高
一个库，好不好用，看下载量就知道。root-toast库显然已经经受住了大家考验。成为比较稳定且好用的toast框架了。
2、为什么这个库让我用得不爽？
2.1 没有提供自定义图标
在国内，绝大部分app的toast提示框都是上边显示一个图标，下边显示提示文本。一个提示框，只显示一段干巴巴的提示语，先不说产品经理会不会答应，作为一个想让自己爽的程序员首先就不答应了。
2.2 没有提供背景mask
项目通常也会存在这样一个需求：当一个toast提示框显示时，需要一个背景遮罩，以突出提示框的内容。同时，在显示一个toast时，就不能再点击其他地方，进行任何触摸操作了。root-toast也没有提供给我们相关的属性来设置
2.3 存在不合理的地方
2.3.1 使用root-toast弹出一个toast提示框，待提示框消失。此时这个提示框仍未消失，只是隐藏了而已。
通过一个例子来说明：我们使得Toast弹出多次提示框，然后通过在iOS上查看视图分层情况，如下图：
页面UI
经过多次弹框后，
此时页面的层次结构
正常逻辑下，当一个toast提示框消失之后，它就应该销毁了，然而root-toast库却只是隐藏，从内存占用的角度来说，这样的选择并不明智。可以说是内存泄漏。
2.3.2 同一时间弹出多个提示框，root-toast的处理逻辑是让所有提示框叠加在一起，于是就出现了如下难看的画面：
提示框重叠效果
3、react-native-root-tips做了什么事情？
上一小节提到的问题，我最终整理成为新的一个库react-native-root-tips，在100%兼容root-toast库下，新增了一下属性和方法
3.1 增加全局修改默认样式方法setDefaultOptions()
假设用户并不满意默认的提示框样式, 而想要自定义样式的时候, 使用root-toast就不得不每次都需要在show()方法里面传入自定义样式。显然，这样是非常重复且琐碎的，而且也并不能全局修改。故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 提供便利方法
即便我们设置了setDefaultOptions方法，当要弹出一个加载中、成功、失败等等的提示框时，在root-toast库中仅仅只提供了一个show()方法，因此我们还不得不需要再次指定图片。这一过程也是非常的麻烦的，而且不灵活。为此root-tips库提供了几个常用的便利构造方法：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();
与此同时，如果你想要设置自定义的图标，你可以直接在setDefaultOptions()方法里面指定相应的图片了。
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会将上一个提示框先关闭，然后再显示。同时，如果一个提示框消失了，那么这个提示框就被销毁了。
4、感谢
感谢react-native-root-toast的作者提供了这么优秀的库。针对以上的问题，由于个人知识浅薄，难免会对作者的用意造成误解，如果有读者发现错误，敬请斧正。最后，希望大家会喜欢这个库react-native-root-tips，顺便给个star，非常感谢。
网友评论