一款简单易用的 Toast 组件，支持 Android&iOS
一款简单易用的 Toast 组件，支持 Android&iOS
CrazyCodeBoy
发布于 2018-05-07 17:13:03
发布于 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
如何使用？
第一步：
在你的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>
);
}更多用例:
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吧，让我们一起做朋友~~
戳这里,加关注哦:
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
