定制Toast

更新时间: 2023/08/14 14:59:47

自定义Toast

云信白板内置了丰富的Toast提示。云信内置的Toast提示主要涵盖连接,同步提示、各类错误提示、视角提示等。开发者可以根据自身的业务场景,使用白板提供的showToasthideToast自定义Toast提示。还可以使用interceptShowToast函数拦截内置的Toast。拦截后,开发者可以修改Toast类型,时间,文案,以及是否显示等。

showToast

showToast可以使用云信白板提供的Toast系统展示提示。它的具体使用方式为:

import WhiteBoardSDK from 'WhiteBoardSDK'

WhiteBoardSDK.showToast({
    msg: '教师开始上课',
    time: 3,
    type: 'info',
    top: 30,
    msgType: 'TEACHER_START_TEACHING'
})

hideToast

调用hideToast后,能关闭当前在界面上显示的Toast。它的调用方式为:

import WhiteBoardSDK from 'WhiteBoardSDK'

WhiteBoardSDK.hideToast()

interceptShowToast

interceptShowToast能够拦截所有的showToast请求,并改变其行为。

interceptShowToast可以返回一个IShowToastOption类型。在返回对象中,开发者可以改变Toast的文案,位置,时间,以及类型。如果返回boolean类型且值为false,则不会显示该Toast。若值为true,则按照原方式显示该Toast

若多次调用interceptShowToast,会使用最后一次interceptShowToast返回的结果。

import WhiteBoardSDK from 'WhiteBoardSDK'

/**
 * 不显示同步数据的Toast
 */
WhiteBoardSDK.interceptShowToast((param: IShowToastOption) => {
    if (param.msgType === 'SYNCHRONIZING') {
        return false
    } else {
        return true
    }
})

/**
 * 修改禁止抢占主播视角的文案
 */
WhiteBoardSDK.interceptShowToast((param: IShowToastOption) => {
    if (param.msgType === 'NOT_ALLOWED_REPLACE_ACTIVE_BROADCASTER') {
        return {
            ...param,
            msg: `${param.args.broadcasterName}正在直播`
        }
    } else {
        return true
    }
})

removeToastIntercept

移除之前设置的拦截请求。

import WhiteBoardSDK from 'WhiteBoardSDK'

WhiteBoardSDK.removeToastIntercept()

MsgType

每个内置的Toast都有一个MsgType。详细的类型可以查看文档。 目前视角类的Toast还带有args参数。开发者可以结合args来设置文案。

样式

目前Toast不支持通过接口配置样式。开发者可以考虑使用css来调整Toast的样式。

客户端设置

客户端上可以使用jsDirectCall调用上面的方法。注意使用jsDirectCall调用interceptShowToast时,需要先将参数中的函数,转化为string类型。

const interceptFnStr = ((option) => {
    option.time = option.time + 3
    return option
}).toString()

{
    action: 'jsDirectCall',
    param: {
        target: 'WhiteBoardSDKClass',
        funcName: 'interceptShowToast',
        arg1: interceptFnStr
    }
}
此文档是否对你有帮助?
有帮助
去反馈
  • 自定义Toast
  • showToast
  • hideToast
  • interceptShowToast
  • removeToastIntercept
  • MsgType
  • 样式
  • 客户端设置