react-native-tencent-im-ui 騰訊雲即時通訊 IM 服務的react-native,使用原生ui版本得sdk

mengyouyouzi發表於2020-10-02

react-native-tencent-im-ui 騰訊雲即時通訊 IM 服務的react-native,使用原生ui版本得sdk

起因,專案中需要用到基礎的im功能(聊天和聊天列表),晚上搜了一圈也沒有找到,技術棧已經定好,也只能硬著頭皮搞了。

直接給大家分享出來,目前功能簡單,如果有簡單需求的可以直接使用。

當前基於 TIMSDK UI版本 標準版 5.0.6 @2020.09.18

專案地址:https://github.com/mengyou658/react-native-tencent-im-ui

支援功能

  1. 聊天列表功能

  2. 聊天功能

待支援的功能

  1. 不支援自定義介面(可以yarn install 後,在node_models/react-native-tencent-im-ui/更改裡面的程式碼或者直接clone專案複製先來貼上過去改吧,雖然不方便,但是也能實現,一個個封裝程式碼都不夠專案成本的?)

  2. 離線訊息

  3. 使用者資訊編輯

  4. 加好友

  5. 等等。。。

支援版本

react-native 0.60 以上版本

如何安裝

1.安裝包

注意需要 --save 引數,react-native會自動link

$ npm install react-native-tencent-im-ui --save

$ yarn add react-native-tencent-im-ui

2. link

react-native 0.60以上 使用的autolink,注意需要 --save 引數,react-native會自動link

android 特別處理

  1. 需要在AndroidManifest.xml增加 activity

``

  1. 在你自己的專案中的,android/app/src/main/java/<你的包名>/MainApplication.java 中onCreate()方法中增加如下

@Override

public void onCreate() {

super.onCreate();

SoLoader.init(this, /* native exopackage */ false);

...

// 然後新增這一行,這裡很重要,initSdk中使用到這個,初始化必須在主Application中初始化,否則會出現執行緒錯誤問題

IMApplication.setContext(this,  MainActivity.class);

...

}

  1. demo 中增加的有華為push的示例(使用的低版本的push,高版本的總是提示安裝hms-core,有點煩),完整的請參考騰訊im-sdk內的demo

示例 請參考 demo 資料夾

android demo 截圖

在這裡插入圖片描述
在這裡插入圖片描述

ios demo 截圖

ios 特別處理

  1. 在你自己的專案中的,AppDelegate.m

...

// 引入標頭檔案

#import "ConversationController.h"

...

// 方法 didFinishLaunchingWithOptions 中修改

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

...

// 下面一行更改為

// self.window.rootViewController = rootViewController;

UINavigationController *nv = [[UINavigationController alloc] initWithRootViewController:rootViewController];

nv.navigationBar.hidden = YES;

nv.delegate = self;

self.window.rootViewController = nv;

ConversationController *c = [ConversationController getInstance];

[c initNc: nv];

...

介面


/**

* 初始化

* @param sdkAppId

*/

export function TIMInitSdk(sdkAppId);

/**

* 登入

* @param userId 使用者id

* @param userSig 使用者sig

* @returns {*|PromiseLike<*>|Promise<*>}

*/

export function TIMLogin(userId, userSig);

/**

* 登出

* @returns {Promise<*>}

*/

export async function TIMLogout();

/**

* 從其他介面跳轉到聊天介面

* @param userId im使用者id

* @param conTitle 聊天標題

* @param type:

*  1 = 使用者會話

*  2 = 分組會話

*/

export function TIMStartChat(userId, conTitle, type = 1);

使用示例

先初始化


import {TIMConversationModel, TIMInitSdk, TIMLogin, TIMLogout, TIMStartChat} from 'react-native-tencent-im-ui';

// 先初始化

TIMInitSdk(sdkAppId);

// 呼叫登入


import {TIMConversationModel, TIMInitSdk, TIMLogin, TIMLogout, TIMStartChat} from 'react-native-tencent-im-ui';

// 呼叫登入

TIMLogin(userId, userSig).then(res=>{

  console.log(res);

}).catch(e => {

});

// 從其他介面跳轉開啟會話


import {TIMConversationModel, TIMInitSdk, TIMLogin, TIMLogout, TIMStartChat} from 'react-native-tencent-im-ui';

// 從其他介面跳轉開啟會話

TIMStartChat(userId, "xxx聊天", 1);

展示聊天列表介面


// 展示聊天列表介面

import {TIMConversationModel, TIMInitSdk, TIMLogin, TIMLogout, TIMStartChat} from 'react-native-tencent-im-ui';

import React from "react";

import {

SafeAreaView,

StatusBar,

} from 'react-native';

export default class Conversation extends React.Component{

  render() {

    return <SafeAreaView style={{flex:1, paddingTop: (Platform.OS === 'ios' ?  10 : StatusBar.currentHeight)}}>

      <TIMConversationModel style={{ flex: 1 }}  {...this.props} />

}

}

參考鳴謝專案

  1. https://github.com/yz1311/react-native-txim/

  2. https://github.com/kurisu994/react-native-txim

相關文章