react-native-tencent-im-ui 騰訊雲即時通訊 IM 服務的react-native,使用原生ui版本得sdk
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
支援功能
-
聊天列表功能
-
聊天功能
待支援的功能
-
不支援自定義介面(可以yarn install 後,在node_models/react-native-tencent-im-ui/更改裡面的程式碼或者直接clone專案複製先來貼上過去改吧,雖然不方便,但是也能實現,一個個封裝程式碼都不夠專案成本的?)
-
離線訊息
-
使用者資訊編輯
-
加好友
-
等等。。。
支援版本
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 特別處理
- 需要在AndroidManifest.xml增加 activity
``
- 在你自己的專案中的,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);
...
}
- demo 中增加的有華為push的示例(使用的低版本的push,高版本的總是提示安裝hms-core,有點煩),完整的請參考騰訊im-sdk內的demo
示例 請參考 demo 資料夾
android demo 截圖
ios demo 截圖
ios 特別處理
- 在你自己的專案中的,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} />
}
}
參考鳴謝專案
相關文章
- 哪款即時通訊 (IM) 服務最好最穩定?
- 第三方即時通訊IM服務對比分析
- iOS整合融雲SDK即時通訊整理iOS
- Android 接入騰訊IM即時通訊(詳細圖文)Android
- Python 服務端整合 騰訊雲 IM 服務Python服務端
- 【融雲分析】 IM 即時通訊之鏈路保活
- 淺談融雲即時通訊服務「日誌優化」優化
- 騰訊安全姬生利:雲原生環境下的“密碼即服務”密碼
- 基於 swoole擴充套件 的即時通訊 im套件
- 即時通訊(IM)江湖的新兵與舊將薦
- 即時通訊IM技術領域提高篇
- 極光的開源禮物「Aurora IMUI」一個通用的即時通訊(IM)UI 庫UI
- 「實戰」搭建完整的IM(即時通訊)應用(2)
- 「實戰」搭建完整的IM(即時通訊)應用(1)
- 如何使用Flutter封裝即時通訊IM框架開發外掛Flutter封裝框架
- 即時通訊IM技術領域基礎篇
- flutter 呼叫環信sdk 實現即時通訊Flutter
- IM即時通訊設計 高併發聊天服務:伺服器 + qt客戶端(附原始碼)伺服器QT客戶端原始碼
- 區塊鏈IM社交系統開發,IM即時通訊平臺搭建app區塊鏈APP
- SpringBoot整合開源IM框架MobileIMSDK,實現即時通訊IM聊天功能Spring Boot框架
- IM即時通訊聊天社交APP VX 聊天語音視訊系統APP
- 即時通訊
- 為自己搭建一個分散式 IM(即時通訊) 系統分散式
- 開源即時通訊IM框架 MobileIMSDK v6.3 釋出框架
- 對接融雲即時通訊元件SDK,輕鬆實現App聊天室元件APP
- Qt+騰訊IM開發筆記(一):騰訊IM介紹、使用和Qt整合騰訊IM-SDK的工程模板DemoQT筆記
- 即時通訊IM,是時代進步的逆流?看看JNPF怎麼說
- 重新認識融雲,「不止即時通訊」
- 手淘千牛IM即時通訊-星巴克訊息開放實踐
- iOS基於Socket.io即時通訊IM實現,WebRTC實現視訊通話iOSWeb
- 魔方實時通訊im元件元件
- 擁抱雲原生,騰訊釋出TCSS容器安全服務!CSS
- 擁抱雲原生,騰訊釋出TCSS容器安全服務CSS
- 通過SignalR技術整合即時通訊(IM)在.NET中應用落地SignalR
- Vue 實戰專案:koa+typescript+MySQL+Vue+socket.io 搭建即時通訊 IM 伺服器及 UIVueTypeScriptMySql伺服器UI
- 騰訊雲sdk 支援 騰訊雲簡訊 Laravel Notification [最新版]Laravel
- 寫了個騰訊雲簡訊的 Go SDKGo
- 即時通訊技術文集(第11期):IM通訊格式的選型及Protobuf專題 [共16篇]