期待已久的新教程上线啦！解锁React Native开发新姿势，一网打尽React Native最新与最热技术，点我Get!!!
react-native-easy-toast
尊重版权,未经授权不得转载
本文出自:CrazyCodeBoy的技术博客官网(https://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>
);
}
更多用例:
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吧，让我们一起做朋友~~