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,
网友评论