提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  移动开发

当前栏目

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

Androidiosamp组件 简单 支持 一款 易用
2023-09-27 14:29:03 时间

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

更多用例:

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，为项目贡献的智慧。

相关文章