前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一款简单易用的 Toast 组件,支持 Android&iOS

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

作者头像
CrazyCodeBoy
发布2018-05-07 17:13:03
1K0
发布2018-05-07 17:13:03
举报
文章被收录于专栏:贾鹏辉的技术专栏@CrazyCodeBoy

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

Screenshots
Screenshots

如何使用?

第一步:

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

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

第二步:

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

代码语言:javascript
复制
 render() {
         return (
             <View style={styles.container}>
                 ...
                 <Toast ref="toast"/>
             </View>
         );
 }

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

第三步:

使用:

代码语言:javascript
复制
 this.refs.toast.show('hello world!');

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

用例

代码语言:javascript
复制
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

代码语言:javascript
复制
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:我的开源项目

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • react-native-easy-toast
    • 目录
      • 安装
        • Demo
          • 如何使用?
            • 用例
            • 自定义 Toast
          • API
            • 贡献
              • 最后
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档