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,但是发现太久没用过,‘温故’出了好多问题,一时不知道从哪写起。

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

原文地址:https://www.cnblogs.com/MaiJiangDou/p/8378731.html

时间: 2024-09-30 09:04:39

React Native学习(八)—— 对接七鱼客服的相关文章

react native 学习一(环境搭配和常见错误的解决)

react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装python2.nodejs.git.Android Studio.这里前面两个都比较好装,android studio装起来相当慢,其实应该只用装sdk就行了,安装sdk可以按http://www.androiddevtools.cn/这个里面的方式设个代理. 软件装好了,就是环境变量设置了,添加AND

React Native学习(1):怎么快速学习一门新技术

React Native学习方法论 这是我技术公众号的第一篇文章,也是ReactNative系列文章的第一篇,对我的文章感兴趣的可以加我微信16230091进行关注. 本文表面上讲React Native(以下简称RN),实际上对于学习任何语言和系统都适用. 对于新技术的学习,分为两种,一种是语言,类似Swift.Objective-C.Java.ES6,另一种是系统,比如Android.iOS.前端. 1. 语言层面,如果你精通某一门语言,那么是可以很快切换到另一门语言的.这就是语言的相通性.

React Native学习-将 &#39;screen&#39;, &#39;window&#39; or a view生成图片

https://github.com/facebook/react-native/commit/ac12f986899d8520527684438f76299675dc0daa 这是react-native自带的生成图片的属性,所以使用之前只需要引用UIManager属性即可: View生成图片: state = { uri: null }; takeToImage() { UIManager.takeSnapshot(this.refs.location, {format: 'png', qu

React Native学习笔记(一)Mac OS X下React Native的环境搭建

本文介绍Mac OS X系统下的React Native环境搭建过程. 1.环境要求: 1) Mac OS X操作系统 2) Xcode6.4或以上版本 3) Node.js4.0或以上版本 4) watchman和flow 2.安装过程 1) Node.js的安装可以在Node.js的官网https://nodejs.org/ 中下载最新的版本.这里下载的是node-v4.4.2.pkg版本.直接双击运行安装就可以了.查看是否安装成功可以在终端中输入如下命令: $node -v 如果能够显示版

React Native 系列(八)

前言 本系列是基于React Native版本号0.44.3写的.我们都知道,一个App不可能只有一个不变的界面,而是通过多个界面间的跳转来呈现不同的内容.那么这篇文章将介绍RN中的导航. 导航 什么是导航? 其本质就是视图之间的界面跳转,例如首页跳转到详情页.在RN中有两个组件负责实现这样的效果,它们是: NavigatorIOS React Navigation 你可能在很多地方听说过Navigator,这个老组件会逐渐被React Navigation代替.笔者在最后也会讲解一下Navig

React Native学习方法论

这是我技术公众号的第一篇文章,也是React Native系列文章的第一篇,对我的文章感兴趣的可以加我微信16230091进行关注. 本文表面上讲React Native(以下简称RN),实际上对于学习任何语言和系统都适用. 对于新技术的学习,分为两种,一种是语言,类似Swift.Objective-C.Java.ES6,另一种是系统,比如Android.iOS.前端. 1. 语言层面,如果你精通某一门语言,那么是可以很快切换到另一门语言的.这就是语言的相通性.翻开市面上那些21天精通某某语言之

React Native学习

学习 首先,假使你已经安装了Nodejs 6,也有使用npm进行Nodejs的包管理 npm install -g react-native-cli 也可以使用yarn作为包管理工具 npm install -g yarn 安装Android Studio 配置系统变量 创建react native 工程 react-native init projectName #projectName是项目名称,可以任意 运行react native 工程 react-native start 运行reac

react native 学习资料整理

入门教程 深入浅出 React Native:使用 JavaScript 构建原生应用 http://www.appcoda.com/react-native-introduction/  中文版 http://www.cocoachina.com/ios/20150408/11513.html react-native 之布局篇 https://segmentfault.com/a/1190000002658374 Flex布局入门 http://www.ruanyifeng.com/blog

react native 学习之 native modules

翻译自https://facebook.github.io/react-native/docs/native-modules-ios.html Native Modules 很多情况下,app需要使用原生的api,或者是用一些已经用OC.Swift或C++写好的模块,又或者需要写出更高效率的.或多线程的代码来支撑图像处理.数据库或其它高要求的需求. React Native的设计当然是支持我们使用原生特性的,以使平台本身的能力得以完全发挥.不过这相对来说是比较进阶的功能,他们的存在虽然是必要的,