react-native-easy-toast

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

目录

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

安装

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

Demo

• Examples

如何使用？

第一步：

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

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

第二步：

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

 render() {
     return (
         <View>
             ...
            <Toast ref={(toast) => this.toast = toast}/>
         </View>
     );
 }

注意: 请将<Toast ref={(toast) => this.toast = toast}/> 放在最外层View的底部。

第三步：

使用：

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

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

或者像这样

this.toast.show(<View><Text>hello world!</Text></View>);

用例

render() {
return (
    <View>
        <Button title={'Press me'} onPress={()=>{
            this.toast.show('hello world!',2000);
        }}/>
        <Toast ref={(toast) => this.toast = toast}/>
    </View>
);
    }

自定义 Toast

render() {
    return (
        <View>
            <Button title={'Press me'} onPress={()=>{
                    this.toast.show('hello world!',2000);
                }}/>
            <Toast
                ref={(toast) => this.toast = toast}
                style={{backgroundColor:'red'}}
                position='top'
                positionValue={200}
                fadeInDuration={750}
                fadeOutDuration={1000}
                opacity={0.8}
                textStyle={{color:'red'}}
            />
        </View>
    );
}

更多用例:

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的位置 positionValue | React.PropTypes.number | true | 120 | 自定义Toast的位置 fadeInDuration | React.PropTypes.number | true | 500 | 自定义 toast淡入时间 fadeOutDuration | React.PropTypes.number | true | 500 | 自定义 toast淡出时间 opacity | React.PropTypes.number | true | 1 | 自定义 toast 的透明度 textStyle | View.propTypes.style | true | {color:'white'} | 自定义text的样式

方法 | 类型 | 可选 | 描述 ----------------- | -------- | -------- | ----------- | ----------- show(text, duration, callback, onPress) | function | false | 弹出提示框,单位是毫秒 close() | function | true | 手动关闭提示框

贡献

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

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