簡介

網(wǎng)易七魚 iOS SDK 是客服系統(tǒng)訪客端的解決方案，既包含了客服聊天邏輯管理犀呼，也提供了聊天界面，開發(fā)者可方便的將客服功能集成到自己的 APP 中鬼廓。 本模塊支持 iOS 7 以上晰奖，Android 2.3 以上版本谈撒，同時支持手機、Pad匾南。在iOS 9.2 以上版本中支持 IPv6啃匿，能正常通過蘋果審核。 詳情請前往：http://www.qiyukf.com

安裝與配置

安裝

通過yarn安裝

yarn add react-native-qiyu

即把react-native-qiyu導(dǎo)入到工程中的node_modules文件夾中

配置

iOS

執(zhí)行以下命令：

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中肄方，默認(rèn)需要為每次網(wǎng)絡(luò)傳輸建立SSL冰垄，解決方法是在應(yīng)用plist文件中設(shè)置
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key></true>
</dict>

iOS10權(quán)限設(shè)置

* 在Info.plist中加入以下內(nèi)容：
    <key>NSPhotoLibraryUsageDescription</key>
    <string>需要照片權(quán)限</string>
    <key>NSCameraUsageDescription</key>
    <string>需要相機權(quán)限</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>需要麥克風(fēng)權(quán)限</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;    // <--- 導(dǎo)包

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名稱');

注意事項

建議在應(yīng)用啟動時初始化，初始化之前無法使用此模塊的其他方法拾徙。七魚模塊只需要初始化一次洲炊。代碼如下

componentWillMount() {
    QiYu.registerAppId('七魚管理后臺的appKey', '七魚管理后臺的App名稱');
}

openServiceWindow 啟動客服聊天窗口

openServiceWindow(params)

params

示例代碼

import QiYu from 'react-native-qiyu';
var params = {
    source:{
        sourceTitle:'網(wǎng)易七魚ReactNative',
        sourceUrl:'http://www.qiyukf.com',
        sourceCustomInfo:'我是來自自定義的信息'
    },
    commodityInfo:{
        commodityInfoTitle:'ReactNative商品',
        commodityInfoDesc:'這是來自網(wǎng)易七魚ReactNative的商品描述',
        pictureUrl:'http://qiyukf.com/res/img/companyLogo/blmn.png',
        commodityInfoUrl:'http://www.qiyukf.com',
        note:'￥1000',
        show:true
    },
    sessionTitle:'網(wǎng)易七魚',
    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 用于設(shè)置聊天窗口中的事件處理

setUrlClickWithEventName(eventName)

params

示例代碼

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

setUnreadCountWithEventName 用于設(shè)置會話管理奄侠，使得未讀數(shù)改變的時候會回調(diào)

setUnreadCountWithEventName(eventName)

示例代碼

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

getUnreadCountCallback 得到會話未讀數(shù)烹卒，主動獲取

getUnreadCountCallback(callback(unreadCount))

params

示例代碼

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

setUserInfo 用于設(shè)置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 注銷當(dāng)前賬號

logout()

示例代碼

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

此文轉(zhuǎn)自網(wǎng)易七魚官方GitHub：https://github.com/qiyukf/react-native-qiyu