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

一款简单易用的 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

如何使用？

第一步：

在你的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>        );    }

更多用例:

SearchPage.js@GitHubPopular

API

属性类型可选默认值描述styleView.propTypes.styletrue{backgroundColor: ‘black’,opacity: OPACITY,borderRadius: 5,padding: 10,}自定义Toast的样式positionPropTypes.oneOf([‘top’,’center’,’bottom’,])true‘bottom’自定义Toast的位置

方法类型可选描述show(text, duration)functionfalse弹出提示框close()functiontrue手动关闭提示框

贡献

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