我为什么要修改react-native-root-toast库

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,非常感谢。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,290评论 4 363
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,399评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,021评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,034评论 0 207
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,412评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,651评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,902评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,605评论 0 199
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,339评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,586评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,076评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,400评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,060评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,083评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,851评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,685评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,595评论 2 270

推荐阅读更多精彩内容