本文基于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:,
staffId:,
robotId:,
robotFirst:false,
faqTemplateId:,
vipLevel:,
showQuitQueue:true,
showCloseSessionEntry:true
}
QiYu.openServiceWindow(params);
} render() {
return (
<View style={styles.container}>
<CommonHead
navBarColor='#fff'
borderBottomWidth={}
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: ,
alignItems: 'center',
backgroundColor:'#efefef',
},
main:{
borderTopColor: '#999',
borderTopWidth: 0.5,
},
});

四、效果图

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

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

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

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

  1. React Native 学习-01

    React Native 学习 (学习版本 0.39) 一.环境配置 二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由 ...

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

    react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...

  3. React Native 学习资料

    React Native 学习资料 学习资料 网址 React Native中文网 https://reactnative.cn/

  4. React Native 学习(三)之 FlexBox 布局

    React Native 学习(三)之 FlexBox 布局

  5. React Native 学习笔记--进阶(二)--动画

    React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...

  6. React Native学习(七)—— FlatList实现横向滑动列表效果

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

  7. iOS、swift、React Native学习常用的社区、论坛

    <!----iOS> <!----Swift>*IOS开发常用社区:http://code4app.com/ *IOS开发常用社区:http://www.cocoachina. ...

  8. iOS 写给iOS开发者的React Native学习路线(转)

    我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...

  9. 写给iOS开发者的React Native学习路线(转)

    我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...

随机推荐

  1. 一些JavaScript技巧

    1.获取浏览器的高度和宽度(不包括工具栏和滚动条): var w=window.innerWidth //现代浏览器 || document.documentElement.clientWidth / ...

  2. 常见ie css hack

    .all IE{property:value\9;} .gte IE 8{property:value\0;} .lte IE 7{*property:value;} .IE 8/9{property ...

  3. 【读书笔记与思考】《python数据分析与挖掘实战》-张良均

    [读书笔记与思考]<python数据分析与挖掘实战>-张良均 最近看一些机器学习相关书籍,主要是为了拓宽视野.在阅读这本书前最吸引我的地方是实战篇,我通读全书后给我印象最深的还是实战篇.基 ...

  4. 线上服务器上安装的VNCServer不能正常工作

    1.问题描述: 线上服务器上安装的不能正常工作 2.解决问题过程: 一. 重启vncserver 运行命令:vncserver -kill :1和vncserver :1 二. 发现vncserver ...

  5. Python面试题解答

    1. 一个谜题 >>> t = (1, 2, [30, 40]) >>> t[2] += [50, 60] 到底会发生下面 4 种情况中的哪一种? a. t变成(1 ...

  6. 使用jemeter手工编写注册、登陆脚本 运用 fiddler (一)

    我们要使用jemeter来手工写一个脚本 我们要使用到两个工具 一个 就是  jmeter  一个就是 fiddler 为什么要使用fiddler   ? 因为能够帮我们正确精准的找到我们需要的数据 ...

  7. TLD网络资源汇总--学习理解之(四)

    原文:http://blog.csdn.net/mysniper11/article/details/8726649 引文地址:http://www.cnblogs.com/lxy2017/p/392 ...

  8. CCS入门基础

      1.CSS概念 全称为Cascading Style Sheets(层叠样式表),支持专有的文件 - 扩展名为".css" 作用:将HTML的结构(HTML标签即html)与样 ...

  9. RHM-M10汽车吊力矩限制器/载荷指示器

    一 产品特点 1.     采用7.0寸工业65K色TFT LCD真彩屏,亮度250nit,分辨率800×480: 2.     传感器采用进口机芯,过载能力强: 3.     采用油压取力和大臂弯曲 ...

  10. 连接WiFi工具类

    public class WifiConnect { WifiManager wifiManager; // 构造函数 public WifiConnect(WifiManager wifiManag ...