基于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、close方法
this.refs.taropop.show({...options})
this.refs.taropop.close()
▍自定义弹窗模板内容（如下图）
只需把页面上的模板写成如下即可，调用方式还和上面一样
<taropop ref="taropoptpl">
...
</taropop>
支持多种参数配置：
/**
* @ 弹窗默认配置
*/
static defaultprops = {
isvisible: false, //弹窗显示
title: '', //标题
content: '', //内容
contentstyle: null, //内容样式
style: null, //自定义弹窗样式
skin: '', //弹窗风格
icon: '', //弹窗图标
xclose: false, //自定义关闭按钮
shade: true, //遮罩层
shadeclose: true, //点击遮罩关闭
opacity: '', //遮罩透明度
time: 0, //自动关闭时间
end: null, //销毁弹窗回调函数
position: '', //弹窗位置显示
btns: null, //弹窗按钮 [{...args}, {...args}]
}
/**
* 显示弹窗事件
*/
show = (options) => {
this.setstate({
...this.props, ...options, isvisible: true
})
}
/**
* 关闭弹窗事件
*/
close = () => {
this.setstate({...this.props})
this.timer && cleartimeout(this.timer)
delete this.timer
typeof this.state.end === 'function' && this.state.end.call(this)
}
/**
* 点击遮罩关闭
*/
shadeclick = () => {
if(!this.state.shadeclose) return
this.close()
}
◆ msg消息框提示
this.refs.taropop.show({
content: 'taro自定义模态modal弹窗',
shadeclose: false,
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.taropop
taropop.show({
skin: 'toast',
content: 'loading',
icon: 'loading', //success | info | error | loading
shade: false,
time: 3
})
◆ android弹窗效果
let taropop = this.refs.taropop
taropop.show({
skin: 'android',
title: '邮件提醒',
content: '系统检测到你未开启新邮件提醒功能，为了保证新邮件能及时收到提醒，请前往系统 [设置] - [应用] 中开启',
shadeclose: false,
btns: [
{
text: '取消',
onclick() {
taropop.close()
}
},
{
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} onrequestclose={this.close}>
{rendertpl}
</modal>
)
}else 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: false, //弹窗显示
title: '', //标题
content: '', //内容
contentstyle: null, //内容样式
style: null, //自定义弹窗样式
skin: '', //弹窗风格
icon: '', //弹窗图标
xclose: false, //自定义关闭按钮
shade: true, //遮罩层
shadeclose: 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.setstate({
...this.props, ...options, isvisible: true
})
}
/**
* @ 关闭弹窗事件
*/
close = () => {
this.setstate({...this.props})
this.timer && cleartimeout(this.timer)
delete this.timer
typeof this.state.end === 'function' && this.state.end.call(this)
}
/**
* @ 点击遮罩关闭
*/
shadeclick = () => {
if(!this.state.shadeclose) return
this.close()
}
render() {
let { isvisible, title, content, contentstyle, style, skin, icon, xclose, shade, shadeclose, 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>
{/* xclose */}
{xclose ? <view classname="atpop__ui_xclose" onclick={this.close}><image classname="atpop__ui_xclose-img" src={require('./skin/error.png')} mode="aspectfit" /></view> : null}
</view>
</view>
)
// 渲染窗体
if (taroenv === 'rn') {
return (
<modal transparent={true} visible={isvisible} onrequestclose={this.close}>
{rendertpl}
</modal>
)
}else if (taroenv === 'h5' || taroenv === 'weapp'){
return isvisible && rendertpl
}
}
}
好了，以上就是taro自定义弹窗组件实现方式，希望能有帮助✊✊~~
