bobol-qiyu v1.0.2

网易七鱼 React-Native 模块集成指南

QiYu

简介

七鱼客服更新最新的ios，该版本不支持RN6.0+的自动导入请在react-native-config中手动配置

module.exports = {
  dependencies: {
    'react-native-qiyu': {
      platforms: {
        android: null, // disable Android platform, other platforms will still autolink if provided
        ios: null,
      },
    },
  },
};

安装与配置

安装

通过 Yarn 安装模块

如果没有安装 Yarn，请先安装 Yarn

npm install -g yarn

安装七鱼 SDK

yarn add react-native-qiyu

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

配置

iOS

通过rnpm link 如果你还没有安装rnpm，执行以下命令来安装rnpm

npm install -g rnpm

安装完rnpm后执行以下命令

rnpm link react-native-qiyu

link成功命令行会提示

rnpm info Linking react-native-qiyu ios dependency

或者你还可以手动配置

打开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、libxml2.tbd、AssetsLibrary.framework等依赖库

iOS9传输安全问题

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

如果在原生代码中需要引入七鱼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
• cleanCache

方法接口描述

* 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,
    robotId:0,
    robotFirst:false,
    faqTemplateId:0,
    vipLevel:0,
    showQuitQueue:true,
    showCloseSessionEntry:true
}
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)

params

示例代码

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();

*cleanCache

清理缓存

cleanCache()

示例代码

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