将环信客服集成到 React Native 项目中。目前只实现了 Android 端
$ npm install react-native-huanxin-kefu --save
$ react-native link react-native-huanxin-kefu
1.打开 React Native 项目 android/app/build.gradle
,在 dependencies 内添加依赖
dependencies {
// 环信客服
implementation 'com.hyphenate:kefu-easeui-android:latest.release'
implementation 'com.github.bumptech.glide:glide:4.7.1'
implementation 'com.easemob:kefu-sdk:1.1.9r2'
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "com.facebook.react:react-native:+" // From node_modules
if (enableHermes) {
def hermesPath = "../../node_modules/hermesvm/android/";
debugImplementation files(hermesPath + "hermes-debug.aar")
releaseImplementation files(hermesPath + "hermes-release.aar")
} else {
implementation jscFlavor
}
}
- 打开
android/app/src/main/java/com/your project/MainActivity.java
在 onCreate 方法下添加初始化代码
package com.your project;
import com.facebook.react.ReactActivity;
import android.os.Bundle;
import com.hyphenate.chat.ChatClient;
import com.hyphenate.helpdesk.easeui.UIProvider;
public class MainActivity extends ReactActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ChatClient.Options options = new ChatClient.Options();
options.setAppkey("环信客服的Appkey");
options.setTenantId("环信客服的tenantid");
ChatClient.getInstance().init(this, new ChatClient.Options().setConsoleLog(true));
if (!ChatClient.getInstance().init(this, options)){
return;
}
UIProvider.getInstance().init(this);
}
...
}
- 运行
react-native run-android
, 打印NaviteModules
,发现有NaviteModules
则引入成功,否则检查步骤,并进入android
目录,使用./gradlew clean
清理缓存,重新运行react-native run-android
即可
import RNHuanxinKefu from 'react-native-huanxin-kefu';
const username = 'zakzheng';
const password = '123456';
HuanxinKefu.register(username, password).then(() => {
HuanxinKefu.login(username, password)
.then(() => {
HuanxinKefu.openChat();
})
.catch(e => {
if (e.error === '账号已登录') {
// 打开聊天页面
return HuanxinKefu.openChat();
}
});
});
// 退出登录
HuanxinKefu.loginout();