React Native学习—— 对接七鱼客服

Posted 麦豇豆

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React Native学习—— 对接七鱼客服相关的知识,希望对你有一定的参考价值。

本文基于React Native 0.52

Demo上传到Git了,有需要可以看看,写了新内容会上传的。Git地址 https://github.com/gingerJY/React-Native-Demo

本文参考 https://github.com/qiyukf/react-native-qiyu

一、安装

npm install react-native-qiyu --save

 

二、配置  

  1. 修改android/settings.gradle,手动加入以下代码
    include \':react-native-qiyu\'
    project(\':react-native-qiyu\').projectDir = new File(rootProject.projectDir, \'../node_modules/react-native-qiyu/android\')

     

  2. 编辑android/app/build.gradle
    // ...
    
    dependencies {
        // ...
        compile project(\':react-native-qiyu\')
    }

     

  3. 在MainApplication.java中注册模块 ,编辑android/app/src/main/java/[...]/MainApplication.java   (这里注意一下,只有有备注的那里是要添加的,七鱼的appkey和名称登录七鱼后可以在APP接入那里找到)
    // ...
    
    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
                );
            }
    
            // ...
        };
    
        // ...
    }

     

 

三、使用

import React, {Component} from \'react\';
import {
    StyleSheet,
    View,
    Text,
    Image,  
    Dimensions,
    TouchableOpacity,
} from \'react-native\';

const {width,height} = Dimensions.get(\'window\');

import QiYu from \'react-native-qiyu\';

//引用外部文件
import MessageItem from \'./messageItem\';
export default class messageCenter extends Component {

    // 七鱼客服
    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);
    }
   
    render() {
        return (
            <View style={styles.container}>
                <CommonHead
                    navBarColor=\'#fff\'
                    borderBottomWidth={1}
                    leftItem = {() => this.renderLeftItem()}
                    titleItem = {() => this.renderTitleItem()}
                />
                <View style={styles.main}>
                    <View>
                        <MessageItem 
                            icon={require(\'../../img/kf.png\')} 
                            title=\'在线客服\' 
                            desc=\'小味为你服务 工作时间 9:00-24:00 宝宝们快来撩我吧~\' 
                            onPress={() => {this.qiyu()}}
                        />
                    </View>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: \'center\',
        backgroundColor:\'#efefef\',
    },
    main:{
        borderTopColor: \'#999\',
        borderTopWidth: 0.5,
    },
});

 

四、效果图

 

END-------------------------------------------------------------------------------

今天本来要写一下FIS3,但是发现太久没用过,‘温故’出了好多问题,一时不知道从哪写起。

这个对接七鱼挺简单的,但是没做过还找不到资料的时候还是有点捉急的。

以上是关于React Native学习—— 对接七鱼客服的主要内容,如果未能解决你的问题,请参考以下文章

网易七鱼智能客服系统使用心得

iOS:移动端“用户反馈和客服”的几个平台SDK的介绍

2020 重构 React Native

react native进一步学习(NavigatorIOS 学习)

开始学习react-native(零)

React Native学习笔记