npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@tg1518/react-native-tencent-im-ui

v1.1.83

Published

腾讯云即时通信 IM 服务的react-native,使用原生ui版本的sdk,修改了原作者的依赖冲突【1.1.3有冲突】

Downloads

25

Readme

react-native-tencent-im-ui 腾讯云即时通信 IM 服务的react-native,使用原生ui版本得sdk修改了原作者的依赖冲突

起因,项目中需要用到基础的im功能(聊天和聊天列表),晚上搜了一圈也没有找到,技术栈已经定好,也只能硬着头皮搞了。

直接给大家分享出来,目前功能简单,如果有简单需求的可以直接使用。

当前基于 TIMSDK UI版本 标准版 5.0.6 @2020.09.18

项目地址:https://github.com/1518751112/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 以上版本

四、如何安装

4.1.安装包

注意需要 --save 参数,react-native会自动link

$ npm install @tg1518/react-native-tencent-im-ui --save

$ yarn add @tg1518/react-native-tencent-im-ui

4.2. link

react-native 0.60以上 使用的autolink,注意需要 --save 参数,react-native会自动link

4.2.1 android 特别处理

  1. 需要在AndroidManifest.xml增加 activity

    <activity android:name="com.yunchao.tencentim.activity.ChatActivity" />

  2. 在你自己的项目中的,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);
        
    ...
        
    }
        
  3. demo 中增加的有华为push的示例(使用的低版本的push,高版本的总是提示安装hms-core,有点烦),完整的请参考腾讯im-sdk内的demo

4.2.2 ios 特别处理

```

五、示例 请参考 demo 文件夹

注意,LiteAVSDK_TRTC不支持模拟器运行,请使用真机运行

六、接口

//事件列表

/**
 * 群消息
 */
const GROUP_MESSAGE = "groupMessage"
/**
 * 有用户进入群
 */
const ON_MEMBER_ENTER = "onMemberEnter";
/**
 * 有用户离开群
 */
const ON_MEMBER_LEAVE = "onMemberLeave";
/**
 * 有成员被踢出群
 */
const ON_MEMBER_KICKED = "onMemberKicked";
/**
 * 群被解散
 */
const ON_GROUP_DISMISSED = "onGroupDismissed";
/**
 * 指定管理员身份
 */
const ON_GRANT_ADMINISTRATOR = "onGrantAdministrator";
/**
 * 取消管理员身份
 */
const ON_REVOKE_ADMINISTRATOR = "onRevokeAdministrator";
/**
 * 初始化
 * @param sdkAppId
 */
export function TIMInitSdk(sdkAppId) {

}

/**
 * 登录
 * @param userId
 * @param userSig
 * @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) {

}

/**
 * 加入群
 * @param groupID 群号码
 */
export function TIMJoinGroup(groupID) {

}

/**
 *  发送群聊普通文本消息(最大支持 8KB)
 * @param text 内容
 * @param groupID 群聊id
 * @param priority 发送等级 0:云端按默认优先级传输,适用于在群里发送非重要消息,比如观众发送的弹幕消息等, 1:云端会优先传输,适用于在群里发送重要消息,比如主播发送的文本消息等。
 * @param promise 回调
 */
export function TIMSendGroupTextMessage(text,groupID,priority) {

}

/**
 *事件监听
 * @param event 事件名
 * @param ck 回调
 */
export function TIMOn(event,ck){

}

/**
 * 组件卸载时记得移除监听事件
 */
export function TIMOnRemove(){
}

/**
 *
 * @param groupID 群id
 * @param count 获取数量 拉取消息的个数,不宜太多,会影响消息拉取的速度,这里建议一次拉取 20 个
 * @param msgID 获取消息的起始消息,如果传 null,起始消息为会话的最新消息
 * @returns {Promise<*>}
 */
export async function TIMGetGroupMessageList(groupID,count,msgID=null){

}

/**
 * 发送群图片消息
 * @param imagePath 本地图片路径
 * @param receiver 消息接收者的 userID, 如果是发送 C2C 单聊消息,只需要指定 receiver 即可[二选一]。
 * @param groupID 群聊id [二选一]
 * @param priority 发送等级 0
 */
export async function TIMSendGroupImageMessage(imagePath,receiver,groupID,priority=0){

}

/**
 * 获取直播群在线人数
 * @param groupID 群id
 * @returns 回调
 */
export async function TIMGetGroupOnlineCount(groupID){
}

/**
 * 退出群
 * @param groupID 群id
 * @returns 回调
 */
export async function TIMQuitGroup(groupID){
}

七、使用示例

先初始化


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 => {

});

参考鸣谢项目

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

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