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

ReactNative集成

React Native SDK简述

React Native 示例DEMO

RN IM 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,
    onconnect: onConnect,
    onwillreconnect: onWillReconnect,
    ondisconnect: onDisconnect,
    onerror: onError
  });

消息推送

不带推送

带推送

  // 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',
  };
  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等，一般不影响用户正常使用

常用配置

应用图标更改

应用显示名称更改