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

一、支援功能

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 react-native-tencent-im-ui --save

$ yarn add 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 特别處理

1. 在你自己的項目中的，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();

/**

* 從其他界面跳轉到聊天界面

* @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} />

}

}

           

參考鳴謝項目

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