同时兼容iOS与Android的Toast组件



  • 给大家安利一款可以在iOS和Android上通用的Toast组件: react-native-root-toast
    现在开源的Toast组件一大堆,为什么要选用这个呢?原因如下:

    1. 纯javascript解决方案,免去了原生安装的各种繁杂步骤,直接一行npm install react-native-root-toast --save搞定
    2. 同时兼容iOS和Android,使用完全一致的接口,不用再为同时兼容两个平台再写额外的代码
    3. 可以自定义toast的各类属性(显示时间、位置、延时、动画、阴影等)
    4. 同时支持两种调用形式(可以使用API调用,也可以作为Component直接放在render里面进行控制)

    安装

    npm install react-native-root-toast --save

    搞定!

    使用

    可以支持两种不同的调用方式.
    如果你喜欢API方式的调用

    import Toast from 'react-native-root-toast'; // 引入类库
    
    // 通过调用 Toast.show(message, options); 可以在屏幕上显示一个toast,并返回一个toast实例
    let toast = Toast.show('This is a message', {
        duration: Toast.durations.LONG, // toast显示时长
        position: Toast.positions.BOTTOM, // toast位置
        shadow: true, // toast是否出现阴影
        animation: true, // toast显示/隐藏的时候是否需要使用动画过渡
        hideOnPress: true, // 是否可以通过点击事件对toast进行隐藏
        delay: 0, // toast显示的延时
        onShow: () => { 
            // toast出现回调(动画开始时)
        },
        onShown: () => {
            // toast出现回调(动画结束时)
        },
        onHide: () => {
            // toast隐藏回调(动画开始时)
        },
        onHidden: () => {
            // toast隐藏回调(动画结束时)
        }
    });
    
    // 也可以通过调用Toast.hide(toast); 手动隐藏toast实例
    setTimeout(function () {
        Toast.hide(toast);
    }, 500);
    

    你也可以通过React组件方式调用Toast.在render里面加入<Toast />组件,并通过visible属性对Toast进行控制.
    <Toast /> 的属性和API调用时传入的选项相同.toast内容添加在元素内部: <Toast>message</Toast>
    注意:
    通过组件方式调用的toast,在<Toast />组件 componentWillUnmount 的时候会自动消失

    import React, {Component} from 'react-native';
    import Toast from 'react-native-root-toast';
    
    class Example extends Component{
        constructor() {
            super(...arguments);
            this.state = {
                visible: false
            };
        }
    
        componentDidMount() {
            setTimeout(() => this.setState({
                visible: true
            }), 2000); // show toast after 2s
    
            setTimeout(() => this.setState({
                visible: false
            }), 5000); // hide toast after 5s
        };
    
        render() {
            return <Toast
                visible={this.state.visible}
                position={50}
                shadow={false}
                animation={false}
                hideOnPress={true}
            >This is a message</Toast>;
        }
    }
    
    

    下面是演示动图
    示例图



  • 不错啊, 支持, 正在使用



  • @magicismight 说:
    不错啊



  • @kiliwalk 请问下安卓下如何配置呢?我在ios下使用没有任何问题。但是在安卓下面进行配置,编译就很多错误。
    public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
    这样的配置也不对啊,mainActivity 是继承于ReactActivity啊。



  • @happyming9527 说:

    @kiliwalk 请问下安卓下如何配置呢?我在ios下使用没有任何问题。但是在安卓下面进行配置,编译就很多错误。
    public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
    这样的配置也不对啊,mainActivity 是继承于ReactActivity啊。

    不好意思, 偶尔才上论坛来看看. 这个组件是不需要编译的, 是一个js模块, 直接用就行了啊



  • 好啊好啊!留个脚印备用!



  • @kiliwalk 我弄错了。看成另外一个插件了。谢谢你。



  • 必须点赞呀~ 非常感谢


登录后回复