集成用户资料组件

更新时间: 2023/07/21 06:56:54

IM UIKit 提供用于展示和编辑用户资料的组件 MyAvatarContainer

界面效果

用户资料WebUIKit930.png

界面集成

在您的 React 项目中导入户资料组件,并进行初始化,即可集成该组件。

示例代码如下:

tsximport React from 'react'
import { Provider, MyAvatarContainer } from '@xkit-yx/im-kit-ui'

const App = () => {
  const initOptions = {
    appkey: '', //传入您的App Key
    account: '', //传入您的accid 
    token: '', //传入您的Token
    debugLevel: 'debug', //设置日志级别
    // ……
  }

  return (
    <Provider initOptions={initOptions} sdkVersion={1}>
      <div className="app">
        <div className="my-user-avatar">
          <MyAvatarContainer />
        </div>
      </div>
    </Provider>
  )
}

集成用户资料的组件后,用户资料界面默认支持如下功能:

  • 默认展示用户头像
  • 单击头像展开用户资料编辑界面,修改完可直接保存
此文档是否对你有帮助?
有帮助
去反馈
  • 界面效果
  • 界面集成