React Native 接入

React Native SDK 提供 Android 和 iOS 原生聊天页。大多数应用只需调用打开聊天页的方法即可完成接入；如需调整聊天界面，请修改交付的原生 SDK 源码。

增值服务

React Native 接入属于单独付费的项目。如需获取 React Native SDK 源码包或安排接入支持，请联系我们。

接入准备

• React Native 0.72 及以上、React 18.2 至 20 以下、Node.js 18 及以上。
• Android 最低支持 API 23；iOS 最低支持 iOS 15.1。
• Expo 项目需要使用预构建或开发客户端；Expo Go 不支持原生模块。

请将交付的 React Native SDK 源码包加入项目，并按交付说明完成 Android、iOS 原生依赖配置。SDK 当前不通过 npm 公共仓库发布。

配置访客身份

在业务用户登录完成后进行配置。用户 ID 由业务服务端在访客令牌中确认；客户端配置昵称、头像，以及 attributes（即 visitor.attr 扩展信息）。fetchVisitorToken() 请求您的业务服务端，由服务端返回当前用户的访客令牌；详见用户基础信息对接。

import { Visitor, VisitorAuth } from '@99agent/react-native';

await Visitor.configure({
  config: {
    baseUrl: 'https://live.99kf.com',
    language: 'zh-CN',
  },
  auth: VisitorAuth.tokenProvider(() => appApi.fetchVisitorToken()),
  visitor: {
    nickname: '张三',
    avatar: 'https://www.99kf.com/avatar/12.jpg',
    attributes: [
      { key: 'phone', label: '电话', value: '13800138000' },
      { key: 'name', label: '姓名', value: '张三' },
    ],
  },
});

其中 phone、name 需与客服端的访客字段设置一致。

打开聊天页

await Visitor.openChat({
  groupId: 0,
  title: '在线客服',
});

传递业务上下文

支持在打开聊天页时传入当前商品、订单或其他业务资料，客服可在会话中查看：

await Visitor.openChat({
  groupId: 0,
  contexts: [
    {
      key: 'order:ORDER-1001',
      type: 'order',
      title: '最近订单',
      fields: [
        { key: 'status', label: '订单状态', value: '待发货' },
      ],
    },
  ],
});

字段格式和完整示例请参阅商品和订单对接。

未读计数

可用未读数更新 React Native 应用的红点或数字：

const unreadSubscription = Visitor.addUnreadListener((count) => {
  // 更新宿主应用的红点或数字
});

const count = await Visitor.unreadCount(); // 需要时立即取得当前未读数
// 页面卸载时：unreadSubscription.remove();

监听器会在首次成功取得未读数后收到数值（包括 0），之后仅在数值变化时通知。

原生项目配置

Android 需要能获取 99 客服原生 SDK 依赖，并为实际启用的图片、视频、相机和语音能力声明权限。iOS 需要在 Info.plist 中添加相机、麦克风和相册用途说明。若使用 Expo，请在配置中加入 SDK 插件后执行 npx expo prebuild，再使用开发客户端或原生运行命令调试。