react-native-tencent-im-ui 騰訊雲即時通訊 IM 服務的react-native，使用原生ui版本得sdk
2020-10-04 11:00:13
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} />
}
}