Taro自定义Modal对话框组件

基于taro多端实践taropop：自定义模态框|dialog对话框|msg消息框|toast提示

taro自定义弹出框支持编译到多端h5/小程序/reactnative，还可以自定义弹窗类型/弹窗样式、多按钮事件/样式、自动关闭、遮罩层、弹窗显示位置及自定义内容模板

用法

▍在相应页面引入组件

import taropop from ‘@components/taropop‘

import taro from '@tarojs/taro'import { view, text } from '@tarojs/components'// 引入自定义弹窗组件import taropop from '@components/taropop'export default class taropopdemo extends taro.component {    ...    render() {        return (            <view classname="taro-container">                ...                        山重水复疑无路的作者是谁        {/* 引入弹窗模板 */}                <taropop ref="taropop" />            </view>        );    }}

通过ref方式调用组件内show、clo方法

this.refs.taropop.show({…options})

this.refs.taropop.clo()

▍自定义弹窗模板内容（如下图）

只需把页面上的模板写成如下即可，调用方式还和上面一样

<taropop ref="taropoptpl">    ...</taropop>

支持多种参数配置：

/**  * @ 弹窗默认配置  */static defaultprops = {    isvisible: fal,       //弹窗显示        title: '',              //标题    content: '',            //内容    contentstyle: null,     //内容样式    style: null,            //自定义弹窗样式    skin: '',               //弹窗风格    icon: '',               //弹窗图标    xclo: fal,          //自定义关闭按钮        shade: true,            //遮罩层    shadeclo: true,       //点击遮罩关闭    opacity: '',            //遮罩透明度    time: 0,                //自动关闭时间    end: null,              //销毁弹窗回调函数        p宣传稿osition: '',           //弹窗位置显示    btns: null,             //弹窗按钮 [{...args}, {...args}]}

/**  * 显示弹窗事件  */show = (options) => {    this.tstate({        ...this.props, ...options, isvisible: true    })}/**  * 关闭弹窗事件  */clo = () => {    this.tstate({...this.props})    this.timer && cleartimeout(this.timer)    delete this.timer    typeof this.state.end === 'function' && this.state.end.call(this)}/**  * 点击遮罩关闭  */shadeclick = () => {    if(!this.state.国际宽容日shadeclo) return    this.clo()}

◆msg消息框提示

this.refs.taropop.show({    content: 'taro自定义模态modal弹窗',    shadeclo: fal,    style: {backgroundcolor: 'rgba(0,0,0,.7)', borderradius: 6},    contentstyle: {color: '#fff', fontsize: 12, padding: 12},    time: 3,    opacity: .2,})

◆toast轻提示效果（success | error | info | loading四种图标）

let taropop = this.refs.taropoptaropop.show({    skin: 'toast',    content: 'loading',    icon: 'loading', //success | info | error | loading    shade: fal,    time: 3})

◆android弹窗效果

let taropop = this.refs.taropoptaropop.show({    skin: 'android',    title: '邮件提醒',    content: '系统检测到你未开启新邮件提醒功能，为了保证新邮件能及时收到提醒，请前往系统 [设置] - [应用] 中开启',    shadeclo: fal,        btns: [        {            text: '取消',            onclick() {                taropop.clo()            }        },        {            text: '前往设置',            style: {color: '#4eca33'},            onclick() {                console.log('您点击了前往设置！')            }        }    ]})

emmmm，看了如上展示及调用方式，是否觉得还不错哟！哈哈哈，这可是花了无数个日夜采坑的结果。

尤其是编译到reactnative端，各种千奇百怪的问题，有些抓狂~~

另外对于不同端的一些兼容性处理，需要判断各端环境并渲染相应模板，对于rn，则使用modal

let taroenv = process.env.taro_env// 渲染窗体if (taroenv === 'rn') {    return (        <modal transparent={true} visible={isvisible} onrequestclo={this.clo}>            {rendertpl}        </modal>    )}el if (taroenv === 'h5' || taroenv === 'weapp'){    return isvisible && rendertpl}

另外在样式处理上也需注意rn端兼容性。

/** * @title     taro自定义弹窗组件 - taropop.js * @time     andy by 2019-11-28 * @about     q：282310962  wx：xy190310 */import taro from '@tarojs/taro'import { view, text, image } from '@tarojs/components'import { modal, activityindicator, touchablehighlight } from 'react-native'import classnames from 'classnames'import './index.scss'export default class taropop extends taro.component {    /**      * @ 弹窗默认配置      */    static defaultprops = {        isvisible: fal,       //弹窗显示        title: '',              //标题        content: '',            //内容        contentstyle: null,     //内容样式        style: null,            //自定义弹窗样式        skin: '',               //弹窗风格        icon: '',               //弹窗图标        xclo: fal,          //自定义关闭按钮        shade: true,            //遮罩层        shadeclo: true,       //点击遮罩关闭        opacity: '',            //遮罩透明度        time: 0,                //自动关闭时间        end: null,              //销毁弹窗回调函数        anim: 'scalein',        //弹窗动画        position: '',           //弹窗位置显示        btns: null,             //弹窗按钮 [{...args}, {...args}]    }    constructor(props) {        super(props)        this.state = {            ...this.props,        }        this.timer = null    }    /**      * @ 显示弹窗事件      */    show = (options) => {        this.tstate({            ...this.props, ...options, isvisible: true        })    }    /**      * @ 关闭弹窗事件      */    clo = () => {        this.tstate({...this.props})        this.timer && cleartimeout(this.timer)        delete this.timer        typeof this.state.end === 'function' && this.state.end.call(this)    }    /**      * @ 点击遮罩关闭      */    shadeclick = () => {        if(!this.state.shadeclo) return        this.clo()    }    render() {        let { isvisible, title, content, contentstyle, style, skin, icon, xclo, shade, shadeclo, opacity, time, end, anim, position, btns } = this.state                let toasticon = {            loading: require('./skin/loading.png'),            success: require('./skin/success.png'),            error: require('./skin/error.png'),            info: require('./skin/info.png梵蒂冈旅游'),        }        let taroenv = process.env.taro_env                ...        // 渲染h5、rn模板        const rendertpl = (            <view classname="taropop">                {/* 遮罩 */}                {shade ? <view classname="atpop__ui_mask" style={{opacity: opacity == '' ? .6 : opacity}} onclick={this.shadeclick} /> : null}                {/* 窗体 */}                <view classname="atpop__ui_main">                    <view classname={classnames('atpop__ui_child', skin && 'atpop__' + skin, position && 'atpop__ui_child-' + position)} style={style}>                        {/* 标题 */}                        {title ? <text classname={classnames('atpop__ui_tit', skin && 'atpop__ui_tit-' + skin)}>{title舞蹈大赛}</text> : null}                        {/* 内容 */}                        {content ? <view classname="atpop__ui_cnt">                            {/* toast内容 */}                            {icon && skin === 'toast' ?                                <view classname="atpop__ui_toast">                                    {icon === 'loading' && taroenv === 'rn' ?                                    <activityindicator color="rgba(255,255,255,.5)" size={24} /> : <image classname={classnames('atpop__ui_toast-img', icon=='loading' && 'atpop__ui_toast-img-loading')} src={toasticon[icon]} mode="aspectfit" />                                    }                                </view>                                :                                null                            }                            {/* 文本内容 */}                            <text classname={classnames('atpop__ui_cntxt', skin && 'atpop__ui_cntxt-' + skin)} style={contentstyle}>{content}</text>                        </view>                        :                        this.props.children                        }                        {/* 按钮 */}                        {btns ? <view classname={classnames('atpop__ui_btns', skin && 'atpop__ui_btns-' + skin)}>                            {btns.map((item, i) => {                                return taroenv === 'rn' ?                                 <touchablehighlight classname={classnames('atpop__ui_btn', skin && 'atpop__ui_btn-' + skin)} activeopacity={1} underlaycolor='rgba(200,200,200,.3)' key={i} onpress={item.onclick}>                                    <text classname={classnames('atpop__ui_btntxt', skin && 'atpop__ui_btntxt-' + skin)} style={item.style}>{item.text}</text>                                </touchablehighlight>                                :                                <view classname={classnames('atpop__ui_btn', skin && 'atpop__ui_btn-' + skin)} key={i} onclick={item.onclick}>                                    <text classname={classnames('atpop__ui_btntxt', skin && 'atpop__ui_btntxt-' + skin)} style={item.style}>{item.text}</text>                                </view>                            })}                        </view>                        :                        null                        }                    </view>                    {/* xclo */}                    {xclo ? <view classname="atpop__ui_xclo" onclick={this.clo}><image classname="atpop__ui_xclo-img" src={require('./skin/error.png')} mode="aspectfit" /></view> : null}                </view>            </view>        )        // 渲染窗体        if (taroenv === 'rn') {            return (                <modal transparent={true} visible={isvisible} onrequestclo={this.clo}>                    {rendertpl}                </modal>            )        }el if (taroenv === 'h5' || taroenv === 'weapp'){            return isvisible && rendertpl        }    }}

好了，以上就是taro自定义弹窗组件实现方式，希望能有帮助~~