RN 库 ：https://github.com/qiyukf/react-native-qiyu
现在版本是v3.12.0
"react-native": "0.56.0",
可以使用。
根据 RN 库 ：https://github.com/qiyukf/react-native-qiyu 配置好后，IOS会有问题，然后请看注意事项；
注意事项：
iOS-12 Xcode-10 新版本 libstdc++6.0.9 注意事项 https://www.jianshu.com/p/1e31ea54ec25
- 使用默认头像和背景就好，不要去设置，因为不会产生好的影响，在 IOS 会导致头像看不到如图：
qy-2.png
qiyu_code_1.png
- 如果你的 IOS 版本出现了以下现象，和Android 对比一下，就很容易看出问题：看不到图标，点击评论后更是无法操作，如图：
qy-4.png
原因：IOS 图标资源都没有加载上；
解决方案：
选中项目根目录 => 右键点击 => Add Files to ... =>
qiyu_icon_ios_add.png
add ok 会自动在该位置添加 res ;
qiyu_icon_ios_add_ok.png
重新运行就可以看到正常的界面了；
qiyu_pl_ok.jpeg
最后附上封装好的工具类，方便大家使用：
/**
* Created by nick.
*/
import QiYu from "react-native-qiyu";
let session_bg = require('./../assets/qiyu/session_bg.png')
let customer_head = require('./../assets/qiyu/customer_head.png')
let service_head = require('./../assets/qiyu/service_head.png')
export default {
/**
* 初始化
* TODO 该代码在项目中只能运行一次
* @param app_key
* @param app_name
*/
qiyu_registerAppId : (app_key, app_name) => {
QiYu.registerAppId(app_key, app_name);
},
open_qiyu_window : () => {
let params_ui = {
sessionTipTextColor : '#CC00FF',
sessionTipTextFontSize : 20,
customMessageTextColor : '#CC00FF',
serviceMessageTextColor : '#CC00FF',
messageTextFontSize : 20,
tipMessageTextColor : '#CC00FF',
tipMessageTextFontSize : 20,
inputTextColor : '#CC00FF',
inputTextFontSize : 20,
sessionTipBackgroundColor : '#000000',
// sessionTipBackgroundColor : '#ff0000',
// sessionBackgroundImage : './../assets/qiyu/session_bg.png',
// customerHeadImage : './../assets/qiyu/service_head.png',
// serviceHeadImage : './../assets/qiyu/service_head.png',
sessionMessageSpacing : 2,
showHeadImage : true,
showAudioEntry : true,
showEmoticonEntry : true,
autoShowKeyboard : false
}
QiYu.setCustomUIConfig(params_ui);
let params = {
source : {
sourceTitle : 'ReactNative',
sourceUrl : 'http://www.qiyukf.com',
sourceCustomInfo : '我是来自自定义的信息'
},
commodityInfo : {
commodityInfoTitle : 'ReactNative商品',
commodityInfoDesc : '这是来自ReactNative的商品描述',
pictureUrl : 'http://qiyukf.com/res/img/companyLogo/blmn.png',
commodityInfoUrl : 'http://www.qiyukf.com',
note : '￥1000',
show : true
},
sessionTitle : '客服',
groupId : 0,
staffId : 0,
robotId : 0,
robotFirst : false,
faqTemplateId : 0,
vipLevel : 0,
showQuitQueue : true,
showCloseSessionEntry : true
}
let params_simple = {
sessionTitle : '客服',
groupId : 0,
staffId : 0,
robotId : 0,
robotFirst : false,
faqTemplateId : 0,
vipLevel : 0,
showQuitQueue : true,
showCloseSessionEntry : true
}
QiYu.openServiceWindow(params_simple);
},
/**
*
* 方便客服查看用户信息
*
* @param params params = {
userId:'uid10101010',
data:'[{\"key\":\"real_name\", \"value\":\"土豪\"},{\"key\":\"mobile_phone\", \"hidden\":true},{\"key\":\"email\", \"value\":\"13800000000@163.com\"},{\"index\":0, \"key\":\"account\", \"label\":\"账号\", \"value\":\"zhangsan\", \"href\":\"http://example.domain/user/zhangsan\"},{\"index\":1, \"key\":\"sex\", \"label\":\"性别\", \"value\":\"先生\"},{\"index\":5, \"key\":\"reg_date\", \"label\":\"注册日期\", \"value\":\"2015-11-16\"},{\"index\":6, \"key\":\"last_login\", \"label\":\"上次登录时间\", \"value\":\"2015-12-22 15:38:54\"}]'
}
data=[
{
"key": "real_name",
"value": "土豪"
},
{
"key": "mobile_phone",
"hidden": true
},
{
"key": "email",
"value": "13800000000@163.com"
},
{
"index": 0,
"key": "account",
"label": "账号",
"value": "zhangsan",
"href": "http://example.domain/user/zhangsan"
},
{
"index": 1,
"key": "sex",
"label": "性别",
"value": "先生"
},
{
"index": 5,
"key": "reg_date",
"label": "注册日期",
"value": "2015-11-16"
},
{
"index": 6,
"key": "last_login",
"label": "上次登录时间",
"value": "2015-12-22 15:38:54"
}
]
*/
setUserInfo : (params) => {
QiYu.setUserInfo(params);
},
/**
* 传入用户信息，得到
* @param userId
* @returns {{userId: *, data}}
*/
getUserInfo : (userId,) => {
const data = [
{
"key" : "real_name",
"value" : "土豪"
},
{
"key" : "mobile_phone",
"hidden" : true
},
{
"key" : "email",
"value" : "13800000000@163.com"
},
{
"index" : 0,
"key" : "account",
"label" : "账号",
"value" : "zhangsan",
"href" : "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
},
{
"index" : 1,
"key" : "sex",
"label" : "性别",
"value" : "先生"
},
{
"index" : 5,
"key" : "reg_date",
"label" : "注册日期",
"value" : "2015-11-16"
},
{
"index" : 6,
"key" : "last_login",
"label" : "上次登录时间",
"value" : "2015-12-22 15:38:54"
}
];
let user_info = {
userId,
data : JSON.stringify(data),
};
return user_info;
},
cleanCache : () => {
QiYu.cleanCache();
},
logout : () => {
QiYu.logout();
},
};
本篇完，下面简单介绍一下后台使用方面：
客服可以在后台看到用户发送的消息，并与其沟通；
客服可以设置自己的在线状态、头像等信息；
qiyu_background_kf_head_img.png
客服可以在和客户交流的过程中查看他的基本信息；
qiyu_background.png
一般客服功能较少：
一般客服功能.png
超级管理员功能较多：
管理客服、管理知识库、各种设置，各种查看。
qiyu_超级管理员.png
qiyu_super_settings_1.png
qiyu_super_settings_2.png
qiyu_super_settings_3.png
网友评论