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

react-native-easy-toast

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

目录

  • 安装
  • Demo
  • 如何使用?
  • API
  • 贡献

安装

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

Demo

  • Examples
一款简单易用的 Toast 组件,支持 Android&iOS_第1张图片
Screenshots

如何使用?

第一步:

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

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

第二步:

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

 render() {
         return (
             
                 ...
                 
             
         );
 }

注意: 请将 放在最外层View的底部.

第三步:

使用:

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

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

用例

render() {
        return (
            
                {
                        this.refs.toast.show('hello world!');
                    }}>
                    Press me
                
                
            
        );
    }

自定义 Toast

render() {
        return (
            
                {
                        this.refs.toast.show('hello world!',DURATION.LENGTH_LONG);
                    }}>
                    Press me
                
                
            
        );
    }

更多用例:

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
大家可以自由复制和转载。

最后

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

如果喜欢我的文章,那就关注我的账号吧,让我们一起做朋友~~

戳这里,加关注哦:

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

你可能感兴趣的:(一款简单易用的 Toast 组件,支持 Android&iOS)