-
messages(Array)- 消息数组，用于展示消息 有特定的格式
{
_id: 1, //消息的ID，用于标示，必须唯一
text: 'My message', //发送的消息
createdAt: new Date(), //发送的时间
user: {
_id: 2, //发送方的ID 如果是自己的ID 则在右边，否则在左边
name: 'React Native', //发送方的昵称
avatar: 'https://facebook.github.io/react/img/logo_og.png', //发送方的头像
},
image: 'https://facebook.github.io/react/img/logo_og.png',
//添加你所需要扩展的键值对
}
{
_id: 1,
text: 'This is a system message',
createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
system: true,
//添加你所需要扩展的键值对
}
-
text(String)- 输入框的默认值；默认是undefined -
placeholder(String)- 输入框的占位字符 -
messageIdGenerator(Function)- 为你的新消息自动生成一个id. 默认是用 UUID v4, 由uuid库实现 点击传送门去查看这个库 - uuid -
user(Object)- 配置用户信息
{
_id: 1, //发送消息需要和配置的id一致
avatar, //头像 若不设置则不显示
name, //昵称
}
-
onSend(Function)- 点击send时的回调 -
locale(String)-本地化日期 -
timeFormat(String)- 格式化时间，默认是本地时间，即当前时区的时间 -
dateFormat(String)- 日期格式化 -
isAnimated(Bool)- 键盘出现时，是否有动画 -
loadEarlier(Bool)- 是否显示加载更早的消息按钮"Load earlier messages" -
onLoadEarlier(Function)- 加载更多消息时的回调 -
isLoadingEarlier(Bool)- 点击加载更早的消息时是否出现转菊花的图标 -
renderLoading(Function)- 加载页面未加载出来时的页面 -
renderLoadEarlier(Function)- 配置"Load earlier messages"加载更早消息的按钮 -
renderAvatar(Function)- 配置头像，如果设置'null'则头像都不显示 -
showUserAvatar(Bool)- 是否展示自己的头像，默认时false只展示别人的头像 -
onPressAvatar(Function(user))- 点击头像时的回调 -
renderAvatarOnTop(Bool)头像显示在顶部还是底部，默认是底部
这是在底部
这是在顶部
-
renderBubble(Function)- 自定义气泡
_renderBubble(props) {
return (
<Bubble
{...props}
wrapperStyle={{
left: { //对方的气泡
backgroundColor: '#F5F7F7',
},
right:{ //我方的气泡
backgroundColor:'#FDF099'
}
}}
/>
);
}
-
renderSystemMessage(Function)- 自定义系统消息 -
onLongPress(Function(context,message))- 长按消息气泡时的回调，详细可以看github的演示 showActionSheetWithOptions() -
inverted(Bool)- 反转消息的显示顺序，默认是true即消息显示的顺序是否和你message数组的顺序相同 -
renderMessage(Function)- 自定义消息的内容View -
renderMessageText(Function)- 自定义消息的文本 -
renderMessageImage(Function)- 自定义图片消息 -
imageProps(Object)- 额外的属性要传递给默认创建的组件rendermessageimage点去去查看文档 -
lightboxProps(Object)- 额外的属性传递给Modal框(体现在点击图片的Modal)
点击查看第三方 - Lightbox -
renderCustomView(Function)- 在气泡内创建一个自己自定义的视图，即创建自定义的消息 -
renderDay(Function)- 自定义消息上方的日期 -
renderTime(Function)- 自定义消息中的时间 -
renderFooter(Function)- 自定义listView的底部, 例如.'User is typing...'; 点击查看示例 example/App.jsfor an example
-
renderChatFooter(Function)- 自定义组件的渲染下messagecontainer（从ListView分开） -
renderInputToolbar(Function)- 自定义你的底部工具栏 -
renderComposer(Function)- 自定义textInput输入框 -
renderActions(Function)- 自定义输入框左边的按钮 -
renderSend(Function)-自定义发送按钮；您可以很容易地将子组件传递给原始组件，例如使用自定义图标。 -
renderAccessory(Function)- 在消息编辑器下面的自定义第二行操作 -
onPressActionButton\(Function)- 当点击输入框左边的按钮时的回调 (如果设置了actionSheet将不会执行) -
bottomOffset(Integer)- 从屏幕底部的聊天距离（如显示选项卡栏，则非常有用） -
minInputToolbarHeight(Integer)- 工具栏的最小高度，默认是44 -
listViewProps(Object)- 列表的属性，用于扩展你的列表 -
textInputProps(Object)- 输入框的属性，用于扩展你的输入框 -
keyboardShouldPersistTaps(Enum)- 确定键盘在敲击后是否应该保持可见。一个枚举; 详情见 <ScrollView> -
onInputTextChanged(Function)- 输入框编辑时的回调 -
maxInputLength(Integer)- 输入框输入的最多字符数
以上，会继续修改添加中 欢迎指证。
网友评论