一款简单易用的 Toast 组件,支持 Android&iOS

react-native-easy-toast

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org)

一款简单易用的 Toast 组件,支持 Android&iOS。

目录

安装

  • 1.在终端运行 npm i react-native-easy-toast --save
  • 2.在要使用Toast的js文件中添加import Toast, {DURATION} from 'react-native-toast-easy'

Demo

如何使用?

第一步:

在你的js文件中导入 react-native-toast-easy

import Toast, {DURATION} from 'react-native-toast-easy'

第二步:

将下面代码插入到render()方法中:

 render() {
         return (
             <View style={styles.container}>
                 ...
                 <Toast ref="toast"/>
             </View>
         );
 }

注意: 请将<Toast ref="toast"/> 放在最外层View的底部.

第三步:

使用:

 this.refs.toast.show('hello world!');

在需要弹出提示框时使用上面代码即可。

用例

render() {
        return (
            <View style={styles.container}>
                <TouchableHighlight
                    style={ {padding: 10}}
                    onPress={()=>{
                        this.refs.toast.show('hello world!');
                    }}>
                    <Text>Press me</Text>
                </TouchableHighlight>
                <Toast ref="toast"/>
            </View>
        );
    }

自定义 Toast

render() {
        return (
            <View style={styles.container}>
                <TouchableHighlight
                    style={ {padding: 10}}
                    onPress={()=>{
                        this.refs.toast.show('hello world!',DURATION.LENGTH_LONG);
                    }}>
                    <Text>Press me</Text>
                </TouchableHighlight>
                <Toast 
                    ref="toast" 
                    style={ {backgroundColor:'red'}} 
                    position='top'
                />
            </View>
        );
    }

更多用例:

SearchPage.js@GitHubPopular

API

属性

类型

可选

默认值

描述

style

View.propTypes.style

true

{backgroundColor: ‘black’,opacity: OPACITY,borderRadius: 5,padding: 10,}

自定义Toast的样式

position

PropTypes.oneOf([‘top’,’center’,’bottom’,])

true

‘bottom’

自定义Toast的位置

方法

类型

可选

描述

show(text, duration)

function

false

弹出提示框

close()

function

true

手动关闭提示框

贡献

欢迎大家提Issues。如果能为Issues配一个异常或报错的截图,能帮助我快速的定位问题和解决问题。 另外欢迎大家Pull requests,为项目贡献的智慧。


MIT Licensed 大家可以自由复制和转载。

最后

既然来了,留下个喜欢再走吧,鼓励我继续创作(^_^)∠※

如果喜欢我的文章,那就关注我的博客@ devio.org吧,让我们一起做朋友~~

戳这里,加关注哦:

微博:第一时间获取推送 个人博客:干货文章都在这里哦 GitHub:我的开源项目

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据和云

SCN、ORA-19706错误和_external_scn_rejection_threshold_hours参数

? 熊军(老熊) 云和恩墨西区总经理 Oracle ACED,ACOUG核心会员 Oracle数据库在安装了2012年1月发布的CPU或PSU补丁之后,经常出...

3113
来自专栏HT

基于HT for Web 快速搭建3D机房设备面板

以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观。今天我们就在HT for Web的3D...

1886
来自专栏WeTest质量开放平台团队的专栏

Android性能优化典范(1)

2015年伊始,Google发布了关于Android性能优化典范的专题,一共16个短视频,每个3-5分钟,帮助开发者创建更快更优秀的Android App。课程...

1172
来自专栏吉浦迅科技

DAY 75:阅读Configuration Options

我们正带领大家开始阅读英文的《CUDA C Programming Guide》,今天是第75天,我们正在讲解CUDA 动态并行,希望在接下来的25天里,您可以...

1262
来自专栏猿份到

MVC、MVP、MVVM三剑客

概述 说到Android MVVM,相信大家都会想到Google 2015年推出的DataBinding框架。然而两者的概念是不一样的,不能混为一谈。MVVM是...

35610
来自专栏HT

基于HTML5快速搭建3D机房设备面板

以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观。今天我们就在HT for Web的3D...

31210
来自专栏代码GG之家

google 分屏 横屏模式 按home键界面错乱故障分析(一)

你确定你了解分屏的整个流程? ? 之前分析文章列表: Android 关机对话框概率没有阴影故障分析 android recent key长按事件弹起触发最近列...

2208
来自专栏余林丰

适配器模式

适配器模式其实很简单,或者说学了设计模式到现在,虽然每次看到各种名字的设计模式就觉得很高端,但当真正了解过后才知道其实也没有那么玄乎,有的东西在我们平时的时候都...

1995
来自专栏听Allen瞎扯淡

Mock 与 Stub

这是软件大师Martin Fowler的一篇经典博文。Martin大师在文章中详细的解释了Mock与Stub的区别,以及怎样使用它们进行TDD实践等等一系列干货...

3272
来自专栏hightopo

基于HTML5快速搭建3D机房设备面板

1823

扫码关注云+社区

领取腾讯云代金券