react native toast 组件封装

在移动端开发经常需要给用户一个友好的提示，其中一个重要的方式就是toast。文中将实现一个基于react native封装的Toast组件，支持仅弹出文字，弹出文字和图标两种方式。

首先给出封装的toast弹窗效果

效果图

屏幕快照 2018-01-06 21.36.51.png

屏幕快照 2018-01-06 21.36.36.png

屏幕快照 2018-01-06 21.37.03.png

屏幕快照 2018-01-06 21.37.14.png

下面给出具体实现：
主要就两个文件：代码也比较简单，直接上代码，相信大家都能看懂。
ZanRnToastContainer.js文件

import React from 'react'
import PropTypes from 'prop-types'
import {
    Image,
    Text,
    View,
    Modal,
    StyleSheet,
    Dimensions,
    ViewPropTypes
} from 'react-native'
const DIMENSION = Dimensions.get('window');
const WINDOW_WIDTH = DIMENSION.width;
const WINDOW_Height = DIMENSION.height;
export default class ToastContainer extends React.Component {
    static propTypes = {
        ...ViewPropTypes,
        showSuccess: PropTypes.bool,
        showFail: PropTypes.bool,
        showLoading: PropTypes.bool,
        showWarn: PropTypes.bool,
        message:PropTypes.string,
        destroy:PropTypes.func
    };
    componentDidMount() {
        setTimeout(() => {
            this.props.destroy();
        }, 10000);
    }

    render() {
        return (
            
                
                    
                        {   this.props.showSuccess ?  :
                            this.props.showFail ?  :
                            this.props.showLoading ?  :
                            this.props.showWarn ?  :null
                        }
                        {
                            this.props.showInfo ? {this.props.message} : null
                        }
                    
                
            
        );
    }
}
let styles = StyleSheet.create({
    defaultStyle: {
        marginTop:WINDOW_Height * 0.25,
        alignItems: 'center',
        flex:1
    },
    containerStyle: {
        backgroundColor: '#000',
        opacity: 0.8,
        borderRadius: 5,
        justifyContent: 'center',
        alignItems: 'center'
    },
    containerTextStyle: {

        marginBottom:50,
        alignItems: 'center',
        justifyContent:'flex-end',
        flex:1
    },
    shadowStyle: {
        shadowColor: '#000',
        shadowOffset: {
            width: 4,
            height: 4
        },
        shadowOpacity: 0.8,
        shadowRadius: 6,
        elevation: 10
    },
    textStyle: {
        padding:10,
        fontSize: 16,
        color: '#fff',
        textAlign: 'center'
    },
    imageStyle: {
        marginTop:10,
        marginLeft:20,
        marginRight:20
    }
});

ZanRnToast.js文件,其中依赖了一个三方组件react-native-root-siblings

import React from 'react';
import RootSiblings from 'react-native-root-siblings';
import ToasContanier from './ZanRnToastContainer';

let rootSibling = null;

function destroy() {
    if (rootSibling) {
        rootSibling.destroy()
    }
}

export default class Toast {

    static showSuccess (message) {
        let opts = {'showSuccess':true,'showInfo':true}
        this.show(message,opts);
    }

    static showFail (message) {
        let opts = {'showFail':true,'showInfo':true}
        this.show(message,opts);
    }

    static showInfo (message) {
        let opts = {'showInfo':true}
        this.show(message,opts);
    }

    static showWarn (message) {
        let opts = {'showWarn':true,'showInfo':true}
        this.show(message,opts);
    }

    static show(message, options) {
        if (rootSibling) {
            rootSibling.destroy()
        }
        rootSibling = new RootSibling(
             destroy()}
            />);
        return rootSibling;
    }
}

使用姿势：

    showSucess () {
        Toast.showSuccess('报名成功啦')
    }
    showFail () {
        Toast.showFail('网络断开啦')
    }
    showWarn () {
        Toast.showWarn('注意有人偷窥')
    }
    showInfo () {
        Toast.showInfo('哈哈哈哈哈')
    }

以上就是toast的全部代码，非常简单的封装了一个toast组件，后面会不断优化，支持更多配置项。