简介

网易七鱼 iOS SDK 是客服系统访客端的解决方案，既包含了客服聊天逻辑管理，也提供了聊天界面，开发者可方便的将客服功能集成到自己的 APP 中。 本模块支持 iOS 7 以上，Android 2.3 以上版本，同时支持手机、Pad。在iOS 9.2 以上版本中支持 IPv6，能正常通过苹果审核。 详情请前往：http://www.qiyukf.com

安装与配置

安装

通过yarn安装

yarn add react-native-qiyu

即把react-native-qiyu导入到工程中的node_modules文件夹中

配置

iOS

执行以下命令：

react-native link react-native-qiyu

自动完成配置
link成功命令行会提示

Linking react-native-qiyu ios dependency

或者你还可以手动配置

a.打开XCode's工程中, 右键点击Libraries文件夹 ➜ Add Files to <...> 
b.去node_modules ➜ react-native-qiyu ➜ ios ➜ 选择 RCTQiYu.xcodeproj 
c.在工程Build Phases ➜ Link Binary With Libraries中添加libRCTQiYu.a

工程配置

在工程target的Build Phases->Link Binary with Libraries中加入
UIKit.framework、
CoreText.framework、
MobileCoreService.framework、
SystemConfiguration.framework、
AVFoundation.framwork、
CoreTelephony.framework、
CoreMedia.framework、
AudioToolbox.framework、
libz.tbd、
libstdc++.6.0.9.tbd、
libsqlite3.0.tbd等依赖库，
在Build Phases->Copy Bundle Resources下添加QYResource.bundle资源包。

iOS9传输安全问题

在iOS9中，默认需要为每次网络传输建立SSL，解决方法是在应用plist文件中设置
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key></true>
</dict>

iOS10权限设置

* 在Info.plist中加入以下内容：
    <key>NSPhotoLibraryUsageDescription</key>
    <string>需要照片权限</string>
    <key>NSCameraUsageDescription</key>
    <string>需要相机权限</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>需要麦克风权限</string>

如果不加，会crash。

如果在原生代码中需要引入七鱼SDK

在工程target的Build Setting->
Library Search Paths中添加$(SRCROOT)/../node_modules/react-native-qiyu/ios/RCTQiYu、
在Header Search Paths中添加$(SRCROOT)/../node_modules/react-native-qiyu/ios/RCTQiYu

消息推送

需要在工程的APPDelegate文件中的
(void)application:(UIApplication *)app
                didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
方法中把 APNS Token 传给 SDK

示例代码：

- (void)application:(UIApplication *)app
                didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
    ......

    [[QYSDK sharedSDK] updateApnsToken:deviceToken];

    ......
}

具体使用请参考QiYuDemo例子工程

Android

手动配置 编辑android/settings.gradle

// ...

include ':react-native-qiyu'
project(':react-native-qiyu').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-qiyu/android')

编辑android/app/build.gradle

// ...

dependencies {
    // ...
    compile project(':react-native-qiyu')
}

在MainApplication.java中注册模块（基于React-Native 0.32+） 编辑android/app/src/main/java/[...]/MainApplication.java

// ...

import com.qiyukf.unicorn.reactnative.QiyuSdkPackage;    // <--- 导包

public class MainApplication extends Application implements ReactApplication {
    // ...

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        // ...

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new QiyuSdkPackage("七鱼管理后台的appKey", "七鱼管理后台的App名称")    // <--- 添加package
            );
        }

        // ...
    };

    // ...
}

如果你使用的React-Native版本中不包含MainApplication.java，则可能需要在MainActivity.java中注册模块，方法同上。

Method

• registerAppId
• openServiceWindow
• setCustomUIConfig
• setUrlClickWithEventName
• setUnreadCountWithEventName
• getUnreadCountCallback
• setUserInfo
• logout

方法接口描述

registerAppId 注册七鱼SDK

registerAppId(appKey, appName)

params

示例代码

import QiYu from 'react-native-qiyu';
QiYu.registerAppId('七鱼管理后台的appKey', '七鱼管理后台的App名称');

注意事项

建议在应用启动时初始化，初始化之前无法使用此模块的其他方法。七鱼模块只需要初始化一次。代码如下

componentWillMount() {
    QiYu.registerAppId('七鱼管理后台的appKey', '七鱼管理后台的App名称');
}

openServiceWindow 启动客服聊天窗口

openServiceWindow(params)

params

示例代码

import QiYu from 'react-native-qiyu';
var 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
}
QiYu.openServiceWindow(params);

setCustomUIConfig 自定义客服聊天窗口UI

setCustomUIConfig(params)

params

• 注意

为了防止 react-native 在打包时将用于七鱼的图片文件过滤掉，我们需要将用于七鱼的图片文件添加引用，如
var session_bg = require('./qiyu/session_bg.png')

建议将七鱼使用的图片单独放在一个文件夹下，如qiyu。

示例代码

import QiYu from 'react-native-qiyu';
var params = {
    sessionTipTextColor:'#CC00FF',
    sessionTipTextFontSize:20,
    customMessageTextColor:'#CC00FF',
    serviceMessageTextColor:'#CC00FF',
    messageTextFontSize:20,
    tipMessageTextColor:'#CC00FF',
    tipMessageTextFontSize:20,
    inputTextColor:'#CC00FF',
    inputTextFontSize:20,
    sessionBackgroundImage:'session_bg',
    sessionTipBackgroundColor:'#000000',
    customerHeadImage:'customer_head',
    serviceHeadImage:'service_head',
    sessionMessageSpacing:2,
    showHeadImage:true,
    showAudioEntry:false,
    showEmoticonEntry:false,
    autoShowKeyboard:false
}
QiYu.setCustomUIConfig(params);

setUrlClickWithEventName 用于设置聊天窗口中的事件处理

setUrlClickWithEventName(eventName)

params

示例代码

import QiYu from 'react-native-qiyu';
QiYu.setUrlClickWithEventName(eventName);
DeviceEventEmitter.addListener(eventName, function(e: Event) {
    console.log(e.url);
});

setUnreadCountWithEventName 用于设置会话管理，使得未读数改变的时候会回调

setUnreadCountWithEventName(eventName)

示例代码

import QiYu from 'react-native-qiyu';
QiYu.setUnreadCountWithEventName(UnreadCountCallback);
DeviceEventEmitter.addListener(UnreadCountCallback, function(e: Event) {
    console.log(e.unreadCount);
});

getUnreadCountCallback 得到会话未读数，主动获取

getUnreadCountCallback(callback(unreadCount))

params

示例代码

import QiYu from 'react-native-qiyu';
QiYu.getUnreadCountCallback((unreadCount)=>{
    console.log(unreadCount);
});

setUserInfo 用于设置CRM个人信息

setUserInfo(params)

params

示例代码

import QiYu from 'react-native-qiyu';
var 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\"}]'
}
QiYu.setUserInfo(params);

logout 注销当前账号

logout()

示例代码

import QiYu from 'react-native-qiyu';
QiYu.logout();

此文转自网易七鱼官方GitHub：https://github.com/qiyukf/react-native-qiyu