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
一、支持功能
聊天列表功能
聊天功能
二庄撮、待支持的功能
不支持自定義界面(可以yarn install 后背捌,在node_models/react-native-tencent-im-ui/更改里面的代碼或者直接clone項(xiàng)目復(fù)制先來粘貼過去改吧,雖然不方便洞斯,但是也能實(shí)現(xiàn)毡庆,一個個封裝代碼都不夠項(xiàng)目成本的??)
離線消息
用戶信息編輯
加好友
等等。烙如。么抗。
三、支持版本
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 特別處理
- 需要在AndroidManifest.xml增加 activity
``
- 在你自己的項(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);
...
}
- demo 中增加的有華為push的示例(使用的低版本的push曾雕,高版本的總是提示安裝hms-core奴烙,有點(diǎn)煩),完整的請參考騰訊im-sdk內(nèi)的demo
4.2.2 ios 特別處理
- 在你自己的項(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
}
}