注意: 在使用下面的�之前,先要获取 AuroraIMUI ref
<AuroraIMUI ref={(imui) => {this.imui = imui}}/>
Param: PropTypes.array: [{message}] 用于设置 MessageList 的初始化消息。 ex:
<AuroraIMUI
initialMessages={[
{msgId: '0',msgType: "event",text: "Text message 1"},
{msgId: '1',msgType: "text", text: "Text message 2"},
]}
/>
Param: PropTypes.array: [{message}]
在 MessageList 的底部插入消息。
if(this.imui) { // this.imui is AuroraIMUI ref
this.imui.appendMessages([
{
text,
msgType: 'text',
msgId: 'id_3', // NOTO: the msgId must be unique.
}
])
}
Param: PropTypes.object: {message}
更新指定消息,该方法会匹配相同的 msgId(如果消息列表中没有该 msgId,则不做处理)。
if(this.imui) { // this.imui is AuroraIMUI ref
this.imui.updateMessage({
text,
msgType: 'text',
msgId: 'id_4', // NOTO: the msgId must be unique.
})
}
Param: PropTypes.array: [{message}]
插入消息到 MessageList 的顶部(当触发下拉刷新回调时可以用该方法添加历史消息)。
if(this.imui) { // this.imui is AuroraIMUI ref
this.imui.insertMessagesToTop([
{
text,
msgType: 'text',
msgId: 'id_1', // NOTO: the msgId must be unique.
}
])
}
Param: PropTypes.object: {message}
移除 MessageList 中指定的消息,该方法会匹配删除相同的 msgId(如果消息列表中没有该 msgId,则不做处理)。
if(this.imui) { // this.imui is AuroraIMUI ref
this.imui.removeMessage({
text,
msgType: 'text',
msgId: 'id_1', // NOTO: the msgId must exit in MessageList.
})
}
清楚 MessageList 中所有的消息
if(this.imui) { // this.imui is AuroraIMUI ref
this.imui.removeAllMessage()
}
这个方法会清空 InputView's TextInput.textvalue 的内容,并且触发 onSendText 事件回调, 一般来说不需要调用这个方法,如果你想要自定义发送文本按钮这个方法就很有用。
if(this.imui) { // this.imui is AuroraIMUI ref
this.imui.sendText()
}
当按下默认的发送按钮,会触发这个回调。当主动调用 AuroraIMUI.sendText 方法也会触发这个回调。
<AuroraIMUI
onSendText={ (textStr) => console.log(textStr) }
/>
当 InputView.TextInput.text 内容发生变化的时候回触发这个回调
<AuroraIMUI
onInputTextChanged={ (textStr) => console.log(textStr) }
/>
当下拉刷新 MessageList 的时候回触发这个回调。
<AuroraIMUI
onPullToRefresh={ () => { /* you can load history message here */}
/>
NOTE: 当使用自定义消息的时候 AuroraIMUI.onAvatarClick 会失效 customMessage,需要 Message 中重新传入回调.
PropTypes.function: ( userinfo ) => { }
点击头像的时候会触发这个回调。
NOTE: 当使用自定义消息的时候 AuroraIMUI.onAvatarClick 会失效 customMessage,需要 Message 中重新传入回调.
PropTypes.function: (message) => { }
点击消息行的时候回触发这个回调。
NOTE: 当使用自定义消息的时候 AuroraIMUI.onAvatarClick 会失效 customMessage,需要 Message 中重新传入回调.
PropTypes.function: (message) => { }
点击 status view 的时候会触发这个回调。
NOTE: 当使用自定义消息的时候 AuroraIMUI.onAvatarClick 会失效 customMessage,需要 Message 中重新传入回调.
PropTypes.function: (message) => { }
点击消息内容(泡泡中的内容)的时候回触发这个回调,如果 MessageContent 中有添加手势,可能会截获该事件回调。
NOTE: 当使用自定义消息的时候 AuroraIMUI.onAvatarClick 会失效 customMessage,需要 Message 中重新传入回调.
PropTypes.function: (message) => { }
长按消息内容(泡泡中的内容)的时候回触发这个回调,如果 MessageContent 中有添加手势,可能会截获该事件回调。
NOTE: 使用 renderRow 返回自定义的消息,AuroraIMUI message row 相关的事件回调会失效,需要重新传入,参考如下示例。
import {AuroraIMUI, Message} from "aurora-imui";
// If you want to add a custom message
// You can pass a function to renderRow which return a component
renderCustomRow(message) {
switch(message.msgType) {
case 'image':
// custom message
return <Message
{...{ ...message,
messageContent: (message) => {return <MessageImageContent {...message}/>}
}}
avatarContent={(userInfo) => (<Image source={require('./assert/ironman.png')} />)}
onMsgClick={this.onMsgClick} // you need pass callback
onAvatarClick={this.onAvatarClick} // you need pass callback
onStatusViewClick={this.onStatusViewClick} // you need pass callback
/>
default:
return null
}
}
<AuroraIMUI
renderRow={this.renderCustomRow}
/>
可以用指定 state view 的位置。
<AuroraIMUI
stateContainerStyles={{justifyContent: 'center'}}
/>
用来指定头像的位置。
<AuroraIMUI
avatarContainerStyles={{justifyContent: 'flex-start'}}
/>
如果你想要调整 TextInput 的属性或者样式(例如 placeHolder / placeHoder color / style),可以使用这个属性。
<AuroraIMUI
textInputProps={{
placeholder: 'Input Text message',
multiline: true,
style: {margin: 8, color: 'red'}
}}
/>
PropTypes.function: () => Component
如果希望在 InputView’s textInput 的左侧添加额外的 item, 可以使用这个方法换回自己的 component。
<AuroraIMUI
renderLeft={ () => <View /> }
/>
如果希望在 InputView’s textInput 的右侧添加额外的 item,可以使用这个方法换回自己的 component,通常自定义发送按钮可以使用这个属性。
<AuroraIMUI
renderRight={ () => <View /> }
/>
如果希望在 InputView' textInput 下面添加 item bar 可以使用这个属性返回 component,(注意:返回的 component 需要明确指定高度)
<AuroraIMUI
renderBottom={ () => <View style={{height: 20}}/> }
/>
Params: PropTypes.number 默认为 120
调整 InputView 的最大高度,当你希望跳转 InputView‘ textInput 的最大行数,肯可能需要用到这个参数。 当你用到 renderBottom 这个属性返回自定义的 bottomBar 时,maxInputViewHeight 属性很可能会被用到这个参数。