plus.nativeObj.View封装自动消失提示框

背景：uniapp项目中使用plus.nativeUI.toast提示框，小米10出现了样式异常，消息框宽度和高度都很大，且无圆角很丑，如下：

查询相关BUG仅2020年有一个帖子反馈，但显示已解决无法回复，也无其他最新反馈，考虑到官方处理问题周期较长，先用plus.nativeObj.View代替实现提示框。

封装了一个Toast.js：

import message from "../store/modules/message";

const Toast = ({
	message,
	type = 'success'
}) => {
	if (!message) {
		return
	}
	// primary  success  danger  warning
	let types = {
		success: {
			icon: '/static/images/content/success.png',
			background: '#292D32',
			color: '#FFFFFF;'
		}
	}
	const styles = types[type];
	const {
		statusBarHeight
	} = uni.getSystemInfoSync();

	const x = 32; // 计算宽度 32字体加字间距大小 单位rpx
	let w = 128 + message.length * x + 50;
	const view = new plus.nativeObj.View('toast', {
		top: `${uni.upx2px(statusBarHeight + 80)}px`,
		left: `${uni.upx2px((750 - w) / 2)}px`,
		height: `${uni.upx2px(108)}px`,
		width: `${uni.upx2px(w)}px`,
	});
	// 绘制矩形
	view.drawRect({
		color: styles.background,
		radius: `${uni.upx2px(76)}px`
	}, {
		top: '0px',
		left: '0px',
		width: '100%',
		height: '100%'
	});
	view.draw([{
			tag: 'img',
			id: 'img',
			src: styles.icon,
			position: {
				top: `${uni.upx2px(24)}px`,
				left: `${uni.upx2px(54)}px`,
				width: `${uni.upx2px(60)}px`,
				height: `${uni.upx2px(60)}px`
			}
		},
		{
			tag: 'font',
			id: 'font',
			text: message,
			textStyles: {
				size: `${uni.upx2px(30)}px`,
				color: styles.color,
				align: "center"
			},
			position: {
				left: `${uni.upx2px(40)}px`,
			}
		}
	]);
	view.show();
	setTimeout(() => {
		view.close();
	}, 2000)
}

export default Toast

使用：

Toast({
	message: '取消点赞'
})

小米10真机效果：