本文基於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學習（八）—— 對接七魚客服