IM即时通讯 > SDK开发集成 > Web开发集成 > ReactNative

ReactNative集成

React Native SDK简述

React Native SDK下载链接

React Native 示例DEMO

本地数据库

RN-SDK同时支持含数据库和不含数据库的使用方式，根据开发者的业务场景，可自行处理。

  const nim = NIM.getInstance({
    // debug: true,
    appKey: 'appKey',
    account: 'account',
    token: 'token',
    db: false,
    onconnect: onConnect,
    onwillreconnect: onWillReconnect,
    ondisconnect: onDisconnect,
    onerror: onError
  });
  const SDK = require('NIM_Web_SDK_v5.*.js');
  const Realm = require('realm');
  // 此处将外置的realm数据库挂载到sdk上，供sdk使用
  SDK.usePlugin({
    db: Realm,
  });
  const nim = SDK.NIM.getInstance({
    // debug: true,
    appKey: 'appKey',
    account: 'account',
    token: 'token',
    db: true,   //若不使用数据库，请设置为false。默认为true。
    onconnect: onConnect,
    onwillreconnect: onWillReconnect,
    ondisconnect: onDisconnect,
    onerror: onError
  });

本地日志

RN-SDK支持本地日志存储及远程拉取，开发者可以根据需求选择是否使用本地日志功能。

使用本地日志功能后，SDK会将日志以文件的形式写到用户的终端（手机）上，用户在线时，可以调用服务端接口拉取用户终端上的日志，便于排查问题。

本地存储依赖react-native-fs库，具体使用方法如下：

  1. 安装react-native-fs

    npm install react-native-fs --save

  2. 通过usePlugin方法将数据库挂在到sdk上，如下

    const RNFS = require('react-native-fs')

const params = {
 rnfs: RNFS
}
params.rnfs.size = 1024 * 1024  // 日志文件体积上限，单位:bytes; 选填，默认为1M
SDK.usePlugin(params);

const nim = SDK.NIM.getInstance({
 // .....
 // 初始化IM
})

消息推送

不带推送

带推送

  // iOS/安卓端外推送代码
  const iosPushConfig = {
    tokenName: 'push_online',
  };
  const androidPushConfig = {
    xmAppId: '2882303761517806219',
    xmAppKey: '5971780672219',
    xmCertificateName: 'RN_MI_PUSH',
    hwCertificateName: 'RN_HW_PUSH',
    mzAppId: '113798',
    mzAppKey: 'b74148973e6040c6abbda2af4c2f6779',
    mzCertificateName: 'RN_MZ_PUSH',
    fcmCertificateName: 'RN_FCM_PUSH',
    vivoCertificateName: "vivo证书名",
    oppoAppId: "xxx", // oppoAppId， oppoAppKey， oppoAppSercet 在oppo推送平台注册得到
    oppoAppKey: "xxx",
    oppoAppSercet: "xxx",
    oppoCertificateName: "oppo证书名"
  };
  var nim = SDK.NIM.getInstance({
    // ...
    iosPushConfig,
    androidPushConfig,
    // ...
  })

  // 安卓端内推送示例代码
  import { showNotification } from '../nim/NIM_Android_Push';
  showNotification({
    icon: '', title: msg.from, content: showText, time: `${msg.time}`,
  });

发送文件/图片等

由于RN-SDK发送文件消息需要额外获取文件消息的属性一起发送，所以不建议直接使用sendFile接口发送文件，而是先通过previewFile获取文件的句柄，通过其他api方法将文件属性添加回文件对象，最后再使用sendFile接口发送文件。以下为发送图片文件的示例：

  nim.previewFile({
    type: 'image',
    filePath: options.filePath,
    uploadprogress(obj) {
      // ...
    },
    done: (error, file) => {
      // 通过其他API接口获取到长、宽、大小等图片属性
      file.w = options.width;
      file.h = options.height;
      file.md5 = options.md5;
      file.size = options.size;
      const { scene, to } = options;
      if (!error) {
        constObj.nim.sendFile({
          type: 'image',
          scene,
          to,
          file,
          done: (err, msg) => {
            if (err) {
              return;
            }
            this.appendMsg(msg);
          },
        });
      }
    },
  });

参见消息对象

全局属性注入

由于浏览器环境的全局变量为window，而react-native的全局变量为global，其属性不尽相同，为了做到兼容及适配，RN-SDK会mock一些属性，诸如global.navigator, global.location, global.io等，一般不影响用户正常使用

常用配置

应用图标更改

应用显示名称更改

相关文档

相关产品