React Native 轻松集成聊天组件

Aurora IMUI

今天要介绍的是 Aurora IMUI 库，支持 Android，iOS 和 React Native。本文主要指导 React Native Android 如何集成和使用这个库，先来看看效果图。

安装

• 在你的 RN 项目中使用如下命令：

npm install aurora-imui-react-native --save

• 在项目的 settings.gradle 中配置路径：

include ':app', ':aurora-imui-react-native'
project(':aurora-imui-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/aurora-imui-react-native/ReactNative/android')

• 在 app 的 build.gradle 中添加依赖：

dependencies {
       compile project(':aurora-imui-react-native')
 }

这样就完成了安装步骤。

使用

• 在 MainApplication 中添加 ReactIMUIPackage：

@Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    new ReactIMUIPackage()
            );
        }

• 在 JS 中引入相关 View 和 Module：

your component.js

import IMUI from 'aurora-imui-react-native';
var MessageList = IMUI.MessageList;
var ChatInput = IMUI.ChatInput;
const AuroraIMUIModule = NativeModules.AuroraIMUIModule;

IMUI 提供了 MessageList 组件和 ChatInput 组件。MessageList 是聊天列表，ChatInput 是聊天输入框组件。在 render 方法中引入：

render() {
        return (
            <View style = { styles.container }>
                <MessageList
                    style = {{flex: 1}}
                    onMsgClick = {this.onMsgClick}
                    onMsgLongClick = {this.onMsgLongClick}
                    onAvatarClick = {this.onAvatarClick} 
                    onStatusViewClick = {this.onStatusViewClick}
                    onTouchMsgList = {this.onTouchMsgList}
                    onPullToRefresh = {this.onPullToRefresh}
                    sendBubble = {{imageName:"send_msg", padding: 10}}
                    receiveBubbleTextColor = {'#ffffff'}
                    sendBubbleTextSize = {18}
                    receiveBubbleTextSize = {14}
                    sendBubblePressedColor = {'#dddddd'}
                />
                    <ChatInput
                        style = {this.state.chatInputStyle}
                        menuContainerHeight = {this.state.menuContainerHeight}
                        isDismissMenuContainer = {this.state.isDismissMenuContainer}
                        onSendText = {this.onSendText}
                        onSendGalleryFiles = {this.onSendGalleryFiles}
                        onTakePicture = {this.onTakePicture}
                        onStartRecordVideo = {this.onStartRecordVideo}
                        onFinishRecordVideo = {this.onFinishRecordVideo}
                        onCancelRecordVideo = {this.onCancelRecordVideo}
                        onStartRecordVoice = {this.onStartRecordVoice}
                        onFinishRecordVoice = {this.onFinishRecordVoice}
                        onCancelRecordVoice = {this.onCancelRecordVoice}
                        onSwitchToMicrophoneMode = {this.onSwitchToMicrophoneMode}
                        onSwitchToGalleryMode = {this.onSwitchToGalleryMode}
                        onSwitchToCameraMode = {this.onSwitchToCameraMode}
                        onTouchEditText = {this.onTouchEditText}
                    />
            </View>
        );
    }

注意到 MessageList 和 ChatInput 都有提供了很多属性和属性方法。如果不使用自定义属性，那么将会使用默认的样式。属性方法是一些事件的回调，你可以在回调中创建消息等等。

MessageList 事件：

• onAvatarClick {message: {message json}} : 点击头像触发

• onMsgClick {message: {message json} : 点击消息气泡触发

• onStatusViewClick {message: {message json}} 点击消息状态按钮触发

• onPullToRefresh 滚动 MessageList 到顶部时，下拉触发, 案例用法: 参考 sample 中的聊天组件中的 onPullToRefresh 方法。

MessageList append/update/insert 消息事件:

插入，更新，增加消息到 MessageList, 你需要使用 AuroraIMUIModule (Native Module) 来发送事件到 Native。

• appendMessages([message])

example:

var messages = [{
    msgId: "1",
    status: "send_going",
    msgType: "text",
    text: "Hello world",
    isOutgoing: true,
    fromUser: {
        userId: "1",
        displayName: "Ken",
        avatarPath: "ironman"
    },
    timeString: "10:00",
}];
AuroraIMUIModule.appendMessages(messages);

• updateMessage(message)

example:

var message = {
    msgId: "1",
    status: "send_going",
    msgType: "text",
    text: text,
    isOutgoing: true,
    fromUser: {
        userId: "1",
        displayName: "Ken",
        avatarPath: "ironman"
    },
    timeString: "10:00",
};
AuroraIMUIModule.updateMessage(message);

• insertMessagesToTop([message])

  消息数组的顺序排列要按照时间顺序排列

example:

var messages = [{
    msgId: "1",
    status: "send_succeed",
    msgType: "text",
    text: "This",
    isOutgoing: true,
    fromUser: {
      userId: "1",
      displayName: "Ken",
      avatarPath: "ironman"
    },
    timeString: "10:00",
  },{
    msgId: "2",
    status: "send_succeed",
    msgType: "text",
    text: "is",
    isOutgoing: true,
    fromUser: {
        userId: "1",
        displayName: "Ken",
        avatarPath: "ironman"
    },
    timeString: "10:10",
},{
    msgId: "3",
    status: "send_succeed",
    msgType: "text",
    text: "example",
    isOutgoing: true,
    fromUser: {
        userId: "1",
        displayName: "Ken",
        avatarPath: "ironman"
    },
    timeString: "10:20",
}];
AuroraIMUIModule.insertMessagesToTop(messages);

ChatInput 事件

• onSendText 输入文字后点击发送按钮触发

• onSendGalleryFiles 选中视频或图片后点击发送按钮触发

• onTakePicture 点击拍照按钮触发

• onStartRecordVideo 点击录制视频按钮触发

• onFinishRecordVideo 完成录制视频触发

• onCancelRecordVideo 取消录制视频触发

• onStartRecordVoice 点击录音按钮触发

• onFinishRecordVoice 录音完成后松开手指触发

• onCancelRecordVoice 手指移动到取消录音区域后，抬起手指触发

• onSwitchToMicrophoneMode 点击菜单栏麦克风按钮触发

• onSwitchToGalleryMode 点击菜单栏图片按钮触发

• onSwitchToCameraMode 点击菜单栏拍照按钮触发

• onTouchEditText（Android only）点击输入框触发

样式

MessageList 自定义样式

在 Android 中，如果你想要自定义消息气泡，你需要将一张点九图放在 drawable 文件夹下。 点九图介绍，sample 项目下的 drawable-xhdpi 文件夹中有示范

• sendBubble: PropTypes.string -- 点九图的名字(Android only)

• receiveBubble: PropTypes.string — 同上(Android only)

• sendBubbleTextColor: PropTypes.string,

• receiveBubbleTextColor: PropTypes.string,

• sendBubbleTextSize: PropTypes.number,

• receiveBubbleTextSize: PropTypes.number,

padding 对象包括四个属性: left, top, right, bottom. eg: {left: 5, top: 5, right: 15, bottom: 5}

• sendBubblePadding: PropTypes.object

• receiveBubblePadding: PropTypes.object

• dateTextSize: PropTypes.number,

• dateTextColor: PropTypes.string,

• datePadding: PropTypes.number -- 与上面的不同，这个属性内边距是一样的

• avatarSize: PropTypes.object -- 这个对象有宽高两个属性，Example: avatarSize = {width: 50, height: 50}

• showDisplayName: PropTypes.bool,

使用案例参考