react-native-tencent-im-ui 騰訊云即時通信 IM 服務(wù)的react-native淮悼,使用原生ui版本得sdk

react-native-tencent-im-ui 騰訊云即時通信 IM 服務(wù)的react-native挑胸,使用原生ui版本得sdk

起因波闹,項(xiàng)目中需要用到基礎(chǔ)的im功能(聊天和聊天列表)酝豪,晚上搜了一圈也沒有找到,技術(shù)棧已經(jīng)定好精堕,也只能硬著頭皮搞了孵淘。

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

當(dāng)前基于 TIMSDK UI版本 標(biāo)準(zhǔn)版 5.0.6 @2020.09.18

項(xiàng)目地址:https://github.com/mengyou658/react-native-tencent-im-ui

一、支持功能

  1. 聊天列表功能

  2. 聊天功能

二庄撮、待支持的功能

  1. 不支持自定義界面(可以yarn install 后背捌,在node_models/react-native-tencent-im-ui/更改里面的代碼或者直接clone項(xiàng)目復(fù)制先來粘貼過去改吧,雖然不方便洞斯,但是也能實(shí)現(xiàn)毡庆,一個個封裝代碼都不夠項(xiàng)目成本的??)

  2. 離線消息

  3. 用戶信息編輯

  4. 加好友

  5. 等等。烙如。么抗。

三、支持版本

react-native 0.60 以上版本

四亚铁、如何安裝

4.1.安裝包

注意需要 --save 參數(shù)蝇刀,react-native會自動link

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

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

4.2. link

react-native 0.60以上 使用的autolink,注意需要 --save 參數(shù)徘溢,react-native會自動link

4.2.1 android 特別處理

  1. 需要在AndroidManifest.xml增加 activity

``

  1. 在你自己的項(xiàng)目中的吞琐,android/app/src/main/java/<你的包名>/MainApplication.java 中onCreate()方法中增加如下

@Override

public void onCreate() {

super.onCreate();

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

...

// 然后添加這一行,這里很重要然爆,initSdk中使用到這個站粟,初始化必須在主Application中初始化,否則會出現(xiàn)線程錯誤問題

IMApplication.setContext(this,  MainActivity.class);

...

}

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

4.2.2 ios 特別處理

  1. 在你自己的項(xiàng)目中的翻默,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];

...

五缸沃、示例 請參考 demo 文件夾

android demo 截圖

ios demo 截圖(同上恰起,忘記截圖了)

六修械、接口


/**

* 初始化

* @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();

/**

* 從其他界面跳轉(zhuǎn)到聊天界面

* @param userId im用戶id

* @param conTitle 聊天標(biāo)題

* @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);

調(diào)用登錄


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

// 調(diào)用登錄

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

  console.log(res);

}).catch(e => {

});

從其他界面跳轉(zhuǎn)打開會話


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

// 從其他界面跳轉(zhuǎn)打開會話

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

}

}

參考鳴謝項(xiàng)目

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

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末检盼,一起剝皮案震驚了整個濱河市肯污,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖蹦渣,帶你破解...
    沈念sama閱讀 206,126評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件哄芜,死亡現(xiàn)場離奇詭異,居然都是意外死亡柬唯,警方通過查閱死者的電腦和手機(jī)认臊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來锄奢,“玉大人失晴,你說我怎么就攤上這事【醒耄” “怎么了涂屁?”我有些...
    開封第一講書人閱讀 152,445評論 0 341
  • 文/不壞的土叔 我叫張陵,是天一觀的道長灰伟。 經(jīng)常有香客問我拆又,道長,這世上最難降的妖魔是什么栏账? 我笑而不...
    開封第一講書人閱讀 55,185評論 1 278
  • 正文 為了忘掉前任帖族,我火速辦了婚禮,結(jié)果婚禮上发笔,老公的妹妹穿的比我還像新娘盟萨。我一直安慰自己,他們只是感情好了讨,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,178評論 5 371
  • 文/花漫 我一把揭開白布捻激。 她就那樣靜靜地躺著,像睡著了一般前计。 火紅的嫁衣襯著肌膚如雪胞谭。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 48,970評論 1 284
  • 那天男杈,我揣著相機(jī)與錄音丈屹,去河邊找鬼。 笑死伶棒,一個胖子當(dāng)著我的面吹牛旺垒,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播肤无,決...
    沈念sama閱讀 38,276評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼先蒋,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了宛渐?” 一聲冷哼從身側(cè)響起竞漾,我...
    開封第一講書人閱讀 36,927評論 0 259
  • 序言:老撾萬榮一對情侶失蹤估蹄,失蹤者是張志新(化名)和其女友劉穎怖喻,沒想到半個月后坟瓢,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體君躺,經(jīng)...
    沈念sama閱讀 43,400評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,883評論 2 323
  • 正文 我和宋清朗相戀三年笔时,在試婚紗的時候發(fā)現(xiàn)自己被綠了棍好。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 37,997評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡允耿,死狀恐怖梳玫,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情右犹,我是刑警寧澤提澎,帶...
    沈念sama閱讀 33,646評論 4 322
  • 正文 年R本政府宣布,位于F島的核電站念链,受9級特大地震影響盼忌,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜掂墓,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,213評論 3 307
  • 文/蒙蒙 一谦纱、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧君编,春花似錦跨嘉、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至兑燥,卻和暖如春亮瓷,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背降瞳。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評論 1 260
  • 我被黑心中介騙來泰國打工嘱支, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人挣饥。 一個月前我還...
    沈念sama閱讀 45,423評論 2 352
  • 正文 我出身青樓除师,卻偏偏與公主長得像,于是被迫代替她去往敵國和親扔枫。 傳聞我的和親對象是個殘疾皇子汛聚,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,722評論 2 345